/* ===== Landing Q-B2 — misma línea visual que las landings de CLEMEN, PENTUS y DRONI ===== */
:root {
  --bg: #fafafa;
  --bg-card: #ffffff;
  --ink: #1d1d1f;
  --ink-soft: #515154;
  --accent: #2f6bff;      /* azul de las orejas del Q-B2 */
  --accent-ink: #1d4fd6;  /* azul oscuro para texto sobre fondo claro */
  --cobre: #c27a55;       /* marco de cobre del cubo */
  --glow: #7fe9ff;        /* color de las pantallas */
  --dark: #0a0a0c;
  --dark-ink: #f5f5f7;
  --dark-soft: #a1a1a6;
  --radius: 28px;
  --maxw: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ===== Nav ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px 28px;
  background: rgba(250, 250, 250, .72);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.nav .brand {
  font-weight: 800; letter-spacing: .14em; font-size: 15px;
  color: var(--ink); text-decoration: none;
}
.nav .brand span { color: var(--accent); }
.nav .links { display: flex; gap: 26px; margin-left: auto; }
.nav .links a {
  color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: color .2s;
}
.nav .links a:hover { color: var(--ink); }

/* ===== Escena 3D con scroll (hero incluido) ===== */
.scroll3d { position: relative; height: 520vh; }
.scroll3d .sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f2f2f4 55%, #e8e8ec 100%);
}
#three-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#oscurece {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% 30%, #1a1a20 0%, #0c0c10 60%, #060608 100%);
  opacity: 0;
}
#poster3d {
  position: absolute; inset: 0; margin: auto;
  height: 86%; width: auto; object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.18));
  transition: opacity .8s ease;
}
#poster3d.oculto { opacity: 0; pointer-events: none; }

/* Scrim: degradados del color de fondo arriba y abajo (transparentes en el
   centro) que garantizan contraste del texto sobre las partes negras del
   Q-B2 y su base. Dos capas: la clara para el día y la oscura para la escena nocturna. */
.scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* Alto de cada banda velada. viewer.js las mueve según dónde esté el texto
     en cada momento, para no velar el Q-B2 donde no hace falta. */
  --scrim-top: 24%;
  --scrim-bottom: 32%;
}
#scrim-dia {
  background:
    linear-gradient(to bottom,
      #f7f7f9 0%,
      rgba(247,247,249,.92) calc(var(--scrim-top) * .55),
      rgba(247,247,249,0)   var(--scrim-top)),
    linear-gradient(to top,
      #f5f5f8 0%,
      rgba(245,245,248,.92) calc(var(--scrim-bottom) * .55),
      rgba(245,245,248,0)   var(--scrim-bottom));
  opacity: .6;
}
#scrim-noche {
  background:
    linear-gradient(to bottom,
      #08080b 0%,
      rgba(8,8,11,.92) calc(var(--scrim-top) * .55),
      rgba(8,8,11,0)   var(--scrim-top)),
    linear-gradient(to top,
      #08080b 0%,
      rgba(8,8,11,.94) calc(var(--scrim-bottom) * .55),
      rgba(8,8,11,0)   var(--scrim-bottom));
  opacity: 0;
}

/* Textos superpuestos de la secuencia */
.k-text {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(92vw, 900px); text-align: center;
  opacity: 0; pointer-events: none; z-index: 5;
  transition: none;
}
.k-text.hero-text { top: 14vh; }
/* En escritorio el Q-B2 va a la derecha y el título a la izquierda, alineado. */
@media (min-width: 861px) {
  .k-text.hero-text {
    top: 50%; left: max(6vw, calc((100vw - 1240px) / 2));
    transform: translateY(-50%); text-align: left; width: min(46vw, 620px);
  }
  .k-text.hero-text h1 { font-size: clamp(48px, 6.4vw, 92px); }
}
.k-text.abajo { bottom: 9vh; }
.k-text.arriba { top: 6vh; }
.k-text .sub, .k-text .mini { text-shadow: 0 1px 12px rgba(250,250,250,.9); }
.k-text h1 {
  font-size: clamp(44px, 9vw, 104px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
}
.k-text h1 .acento { color: var(--accent); }
.k-text .sub {
  margin-top: 18px; font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ink-soft); font-weight: 500;
}
.k-text h2 {
  font-size: clamp(30px, 5.4vw, 60px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.06;
  text-shadow: 0 2px 24px rgba(250,250,250,.85);
}
.k-text .mini {
  margin-top: 10px; font-size: clamp(14px, 1.9vw, 18px);
  color: var(--ink-soft); font-weight: 500;
}
.k-text.clara h2 { color: var(--dark-ink); text-shadow: 0 2px 24px rgba(0,0,0,.75); }
.k-text.clara .mini { color: var(--dark-soft); text-shadow: 0 1px 12px rgba(0,0,0,.75); }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 6; color: var(--ink-soft); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  animation: flotar 2.2s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translate(-50%, 0); opacity: .85; }
  50% { transform: translate(-50%, 8px); opacity: .4; }
}
.scroll-hint.oculto { animation: none; opacity: 0; transition: opacity .4s; }

/* ===== En movimiento (animaciones 3D) ===== */
.movimiento { padding: 120px 24px 20px; }
.movimiento .inner { max-width: var(--maxw); margin: 0 auto; }
.movimiento h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.movimiento h2 .acento { color: var(--accent); }
.movimiento .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 58ch; margin: 0 auto 60px;
}
.anim-card {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(26px, 5vw, 64px);
  align-items: center; margin-bottom: 90px;
}
.anim-card.invertida .anim-stage { order: 2; }
.anim-stage {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #ffffff 0%, #f0f0f3 60%, #e6e6eb 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
}
.anim-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.anim-stage.listo canvas { opacity: 1; }
.anim-copy .kicker {
  color: var(--accent-ink); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.anim-copy h3 {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 16px;
}
.anim-copy p { font-size: clamp(16px, 1.8vw, 18px); line-height: 1.55; color: var(--ink-soft); }
.anim-copy .nota, .feature .copy .nota { margin-top: 14px; font-size: 13.5px; color: #86868b; font-style: italic; }

/* ===== Secciones de características ===== */
.features { padding: 110px 24px 40px; }
.feature {
  max-width: var(--maxw); margin: 0 auto 120px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px);
  align-items: center;
}
.feature.invertida .media { order: 2; }
.feature .copy .kicker {
  color: var(--accent-ink); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.feature .copy h2 {
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.06;
  margin-bottom: 18px;
}
.feature .copy p {
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55;
  color: var(--ink-soft); max-width: 46ch;
}
.media {
  border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(110% 110% at 50% 22%, #ffffff 0%, #f0f0f3 58%, #e2e2e8 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
}
.media.r34 { aspect-ratio: 3 / 4; }
.media.r11 { aspect-ratio: 1 / 1; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.oscura { background: radial-gradient(110% 110% at 50% 25%, #2c2c31 0%, #161619 60%, #0a0a0c 100%); }

/* Reveal al hacer scroll */
.rev { opacity: 0; transform: translateY(46px); transition: opacity .9s cubic-bezier(.2,.65,.25,1), transform .9s cubic-bezier(.2,.65,.25,1); }
.rev.visible { opacity: 1; transform: none; }

/* ===== Sección oscura: specs ===== */
.specs { background: var(--dark); color: var(--dark-ink); padding: 130px 24px; }
.specs .inner { max-width: var(--maxw); margin: 0 auto; }
.specs h2 {
  font-size: clamp(34px, 5.4vw, 64px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center;
  margin-bottom: 14px;
}
.specs .lead {
  text-align: center; color: var(--dark-soft); font-size: clamp(16px, 2vw, 20px);
  max-width: 62ch; margin: 0 auto 70px;
}
.specs h2 .acento { color: var(--accent); }
.grid-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.spec-card {
  background: #17171a; border: 1px solid #26262b;
  border-radius: 20px; padding: 28px 24px;
}
.spec-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.spec-card h3 em { color: var(--accent); font-style: normal; }
.spec-card p { color: var(--dark-soft); font-size: 14.5px; line-height: 1.5; }

/* ===== Pantallas (strip de caras, formato 6:5 como la pantalla real) ===== */
.pantallas { background: var(--dark); color: var(--dark-ink); padding: 0 24px 140px; }
.pantallas .inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.pantallas h2 {
  font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.pantallas .lead { color: var(--dark-soft); font-size: 17px; margin-bottom: 50px; }
.strip {
  display: flex; gap: 22px; overflow-x: auto; padding: 10px 6px 26px;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
  justify-content: safe center;
}
.strip .disco {
  flex: 0 0 auto; width: 150px; height: 125px; border-radius: 22px;
  overflow: hidden; border: 5px solid var(--cobre); background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .3s ease, border-color .3s ease;
}
.strip .disco:hover { transform: scale(1.06); border-color: #e8a57f; }
.strip .disco img { width: 100%; height: 100%; object-fit: cover; }
.strip-cap { color: #6e6e73; font-size: 13px; margin-top: 6px; }

/* ===== Estado del proyecto (hoja de ruta) ===== */
.estado { padding: 130px 24px 40px; }
.estado .inner { max-width: var(--maxw); margin: 0 auto; }
.estado h2, .participa h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.estado .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 60ch; margin: 0 auto 64px;
}
.ruta {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  position: relative;
}
.ruta li {
  background: var(--bg-card); border-radius: 22px; padding: 26px 22px 28px;
  box-shadow: 0 14px 40px rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.05);
}
.ruta .cuando {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  background: #f0f0f3; border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.ruta li.actual .cuando { background: var(--accent); color: #fff; }
.ruta li.hecho .cuando { background: #e3f6ec; color: #16794a; }
.ruta h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.ruta p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }

/* ===== Para quién + aportes ===== */
.participa { padding: 110px 24px 20px; }
.participa .inner { max-width: var(--maxw); margin: 0 auto; }
.participa h2 { margin-bottom: 54px; }
.participa h2 .acento, .estado h2 .acento { color: var(--accent); }
.grid-para { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.para-card {
  border-radius: 22px; padding: 28px 22px;
  background: radial-gradient(120% 120% at 20% 0%, #ffffff 0%, #f3f3f5 100%);
  border: 1px solid rgba(0,0,0,.06);
}
.para-card .num { font-weight: 800; color: var(--accent); font-size: 15px; letter-spacing: .1em; margin-bottom: 18px; }
.para-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; }
.para-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.aportes { margin-top: 46px; text-align: center; }
.aportes p { color: var(--ink-soft); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.aportes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.aportes li {
  font-weight: 700; font-size: 17px; padding: 12px 24px; border-radius: 999px;
  background: var(--dark); color: var(--dark-ink);
}

/* ===== Cita del podcast ===== */

.cita .inner { max-width: 900px; margin: 0 auto; text-align: center; }
.cita blockquote {
  font-size: clamp(30px, 4.8vw, 56px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.12; color: var(--ink);
}
.cita blockquote::before {
  content: ''; display: block; width: 64px; height: 6px; border-radius: 3px;
  background: var(--accent); margin: 0 auto 34px;
}
.cita .fuente { margin-top: 26px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

/* ===== Con cuidado / Familia de proyectos (tarjetas como .participa) ===== */
.cuidado, .familia { padding: 110px 24px 20px; }
.cuidado .inner, .familia .inner { max-width: var(--maxw); margin: 0 auto; }
.cuidado h2, .familia h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.cuidado h2 .acento, .familia h2 .acento { color: var(--accent); }
.cuidado .lead, .familia .lead, .participa .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 60ch; margin: 0 auto 54px;
}
.participa h2 + .lead { margin-top: -38px; }
.familia { padding-bottom: 40px; }
.familia .para-card .num { letter-spacing: .14em; font-size: 13px; }
.familia .para-card { background: radial-gradient(120% 120% at 20% 0%, #f5f8ff 0%, #eceff7 100%); }

/* ===== CTA final ===== */
.cta { padding: 140px 24px 80px; }
.cta .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.cta h2 {
  font-size: clamp(36px, 5.6vw, 66px); font-weight: 800;
  letter-spacing: -0.028em; line-height: 1.04; margin-bottom: 22px;
}
.cta h2 .acento { color: var(--accent); }
.cta p {
  font-size: clamp(16px, 2vw, 20px); color: var(--ink-soft);
  line-height: 1.55; max-width: 52ch; margin-bottom: 34px;
}
.btn {
  display: inline-block; background: var(--accent);
  font-weight: 700; font-size: 17px; padding: 15px 34px;
  border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
  color: #fff;
  box-shadow: 0 12px 30px rgba(47, 107, 255, .32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(47, 107, 255, .42); }
.cta .media { max-width: 420px; margin: 0 auto; }
.cta .pasos {
  font-size: 16px; background: #fff; border-left: 4px solid var(--accent);
  padding: 16px 20px; border-radius: 0 14px 14px 0; box-shadow: 0 8px 26px rgba(0,0,0,.06);
}
.cta .cta-links { font-size: 15px; line-height: 1.8; margin: 20px 0 0; }
.cta .cta-links a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.cta .cta-links a:hover { text-decoration: underline; }

/* ===== Footer ===== */
footer {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 34px 24px 44px; text-align: center;
  color: var(--ink-soft); font-size: 13.5px;
}
footer b { letter-spacing: .1em; }
footer b span { color: var(--accent); }
footer a { color: var(--accent-ink); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ===== Q-B2: piezas propias ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav .links { margin-left: auto; margin-right: 22px; }
.nav-cta {
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px;
  padding: 8px 18px; border-radius: 999px; transition: transform .2s ease;
  box-shadow: 0 6px 16px rgba(47,107,255,.28);
}
.nav-cta:hover { transform: translateY(-1px); }
.k-text .btn-hero { pointer-events: auto; margin-top: 28px; }
.titulo-seccion {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.05; text-align: center; margin: 0 auto 90px; max-width: var(--maxw);
}
.acento { color: var(--accent); }
.feature .lista { list-style: none; margin-top: 22px; max-width: 46ch; }
.feature .lista li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--ink-soft); font-size: 16px; line-height: 1.5;
}
.feature .lista li::before {
  content: ''; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 4px;
  background: var(--cobre);
}

/* --- Estudio de emociones (sección oscura) --- */
.estudio { background: var(--dark); color: var(--dark-ink); padding: 130px 24px 120px; }
.estudio .inner { max-width: 1200px; margin: 0 auto; }
.estudio h2 {
  font-size: clamp(34px, 5.4vw, 64px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.estudio h2 .acento { color: var(--glow); }
.estudio .lead { text-align: center; color: var(--dark-soft); font-size: clamp(16px, 2vw, 20px); line-height: 1.55; max-width: 62ch; margin: 0 auto 56px; }
.estudio-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(22px, 4vw, 48px); align-items: stretch; }
.estudio-stage {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 540px;
  background: radial-gradient(90% 80% at 50% 35%, #1d2330 0%, #0f1218 60%, #08090c 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px #20242c;
}
.estudio-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.estudio-stage.listo canvas { opacity: 1; }
.estudio-cargando { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dark-soft); font-size: 14px; letter-spacing: .08em; }
.estudio-stage.listo .estudio-cargando { display: none; }
.burbuja {
  position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 10px);
  width: max-content; max-width: min(86%, 520px); padding: 12px 18px; border-radius: 18px;
  background: rgba(20, 26, 36, .88); border: 1px solid rgba(127, 233, 255, .35);
  color: #e9fbff; font-size: 16px; line-height: 1.45; text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.burbuja.visible { opacity: 1; transform: translate(-50%, 0); }
.estudio-panel { background: #121419; border: 1px solid #23262d; border-radius: var(--radius); padding: 30px 28px; }
.estudio-panel .kicker {
  color: var(--glow); font-weight: 700; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; margin: 4px 0 14px;
}
.estudio-panel .kicker ~ .kicker { margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--dark-ink); cursor: pointer;
  background: #1b1e25; border: 1px solid #2c3038; border-radius: 999px; padding: 8px 14px;
  display: inline-flex; align-items: center; gap: 8px; transition: background .2s, border-color .2s, transform .15s;
}
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--glow)); box-shadow: 0 0 10px var(--c, var(--glow)); }
.chip:hover { border-color: #454a55; transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: #232a38; border-color: var(--c, var(--glow)); }
.hablar { display: flex; gap: 8px; }
.hablar input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--dark-ink);
  background: #1b1e25; border: 1px solid #2c3038; border-radius: 14px; padding: 11px 14px;
}
.hablar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-chico { padding: 11px 20px; font-size: 15px; box-shadow: none; }
.frases { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.frases button {
  font: inherit; font-size: 13.5px; text-align: left; color: var(--dark-soft); cursor: pointer;
  background: none; border: 1px dashed #2f333c; border-radius: 12px; padding: 8px 12px; transition: color .2s, border-color .2s;
}
.frases button:hover { color: var(--dark-ink); border-color: #4a505c; }
.voz { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--dark-soft); font-size: 13.5px; cursor: pointer; }
.telemetria {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px;
  font-variant-numeric: tabular-nums;
}
.telemetria div { background: #17191f; border-radius: 12px; padding: 10px 12px; }
.telemetria span { display: block; font-size: 11.5px; color: #7d818b; letter-spacing: .06em; text-transform: uppercase; }
.telemetria b { font-size: 17px; color: var(--dark-ink); }

/* --- Tarjetas de animación --- */
.anim-stage.oscuro { background: radial-gradient(120% 100% at 50% 30%, #262a33 0%, #14161b 60%, #0b0c0f 100%); }
.anim-etiqueta {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--ink);
  background: rgba(255,255,255,.85); border-radius: 999px; padding: 7px 13px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s ease;
}
.anim-etiqueta.visible { opacity: 1; }
.anim-stage.oscuro .anim-etiqueta { background: rgba(20,24,32,.8); color: var(--dark-ink); }

/* --- Demo HID --- */
.hid { padding: 40px 24px 110px; }
.hid .inner { max-width: var(--maxw); margin: 0 auto; }
.hid h2, .situaciones h2 {
  font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.hid .lead, .situaciones .lead {
  text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55; max-width: 60ch; margin: 0 auto 50px;
}
.hid-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px, 4vw, 50px); align-items: center; }
.hid-escena {
  position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius);
  background: radial-gradient(120% 100% at 50% 20%, #ffffff 0%, #eef0f4 60%, #e2e5ec 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.10); overflow: hidden;
}
.monitor { position: absolute; left: 5%; top: 9%; width: 64%; }
.pantalla-pc {
  position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #dfe8f7, #c9d6ee); border: 9px solid #16181d;
  border-radius: 14px; overflow: hidden;
}
.pie-monitor { width: 24%; height: 24px; margin: 0 auto; background: linear-gradient(#2a2d33, #16181d); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.ventana {
  position: absolute; inset: 5% 7%; background: #fff; border-radius: 9px;
  box-shadow: 0 10px 30px rgba(20,40,80,.15); overflow: hidden; font-size: clamp(6px, .9vw, 11px);
}
.barra { display: flex; align-items: center; gap: 5px; padding: 5px 9px; background: #f1f3f7; border-bottom: 1px solid #e3e6ec; color: #555; font-weight: 600; }
.barra i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #d6d9e0; }
.barra span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-pc { padding: 3% 7%; display: grid; gap: .45em; }
.form-pc label { display: grid; gap: 2px; color: #6b7280; font-weight: 600; }
.campo {
  height: 1.9em; border: 1.5px solid #d5dae3; border-radius: 6px; padding: 0 .6em;
  display: flex; align-items: center; color: #1d1d1f; font-weight: 500; white-space: nowrap; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.campo.corto { width: 40%; }
.campo.activo { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,107,255,.18); }
.campo.activo::after { content: ''; width: 1.5px; height: 1.2em; background: #1d1d1f; margin-left: 1px; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.boton-pc {
  justify-self: start; background: var(--accent); color: #fff; font-weight: 700; padding: .5em 1.1em; border-radius: 7px;
  transition: transform .12s ease, filter .12s ease;
}
.boton-pc.pulsado { transform: scale(.94); filter: brightness(.88); }
.toast-pc {
  position: absolute; right: 5%; bottom: 6%; background: #16794a; color: #fff; font-weight: 700;
  padding: .55em .9em; border-radius: 8px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
.toast-pc.visible { opacity: 1; transform: none; }
.cursor-pc {
  position: absolute; left: 80%; top: 80%; width: 16px; height: 24px; z-index: 3;
  background: #111; clip-path: polygon(0 0, 0 78%, 24% 60%, 42% 100%, 58% 93%, 40% 55%, 72% 55%);
  transition: left .9s cubic-bezier(.45,.05,.3,1), top .9s cubic-bezier(.45,.05,.3,1);
}
.clic-onda {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; z-index: 2;
  border: 2px solid var(--accent); animation: onda .5s ease-out forwards; pointer-events: none;
}
@keyframes onda { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.vision {
  position: absolute; inset: 3%; border: 2px dashed transparent; border-radius: 8px; z-index: 4; pointer-events: none;
  transition: border-color .3s ease; overflow: hidden;
}
.vision span {
  position: absolute; left: 8px; top: 8px; font-size: clamp(8px, .9vw, 11px); font-weight: 800; letter-spacing: .08em; color: #fff;
  background: #e5484d; padding: 3px 8px; border-radius: 999px; opacity: 0; transition: opacity .3s;
}
.vision.activa { border-color: rgba(229, 72, 77, .85); }
.vision.activa span { opacity: 1; }
.vision.activa::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(229,72,77,.7);
  box-shadow: 0 0 12px rgba(229,72,77,.8); animation: escaneo 1.6s ease-in-out infinite;
}
@keyframes escaneo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--alto, 300px) - 4px)); } }
.dongle {
  position: absolute; left: 71%; top: 58%; width: 4.5%; aspect-ratio: 1 / 2.2; background: #22252b; border-radius: 4px 4px 7px 7px;
  display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0,0,0,.2);
}
.dongle::before { content: ''; position: absolute; top: -20%; left: 22%; right: 22%; height: 22%; background: #b8bcc4; border-radius: 2px 2px 0 0; }
.dongle span { color: var(--glow); font-size: clamp(5px, .75vw, 9px); font-weight: 800; writing-mode: vertical-rl; letter-spacing: .1em; }
.ondas { position: absolute; left: 75.5%; top: 55%; width: 9%; aspect-ratio: 1; }
.ondas i {
  position: absolute; inset: 0; border: 3px solid transparent; border-right-color: var(--accent); border-radius: 50%;
  opacity: 0; animation: radio 1.8s ease-out infinite;
}
.ondas i:nth-child(2) { animation-delay: .6s; }
.ondas i:nth-child(3) { animation-delay: 1.2s; }
@keyframes radio { 0% { transform: scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.qb2-mini { position: absolute; right: 0; bottom: 0; width: 31%; filter: drop-shadow(0 14px 22px rgba(0,0,0,.22)); }
.hid-pasos { list-style: none; counter-reset: paso; display: grid; gap: 12px; }
.hid-pasos li {
  counter-increment: paso; position: relative; padding: 16px 18px 16px 58px; border-radius: 18px;
  background: var(--bg-card); border: 1px solid rgba(0,0,0,.06); color: var(--ink-soft); font-size: 15.5px; line-height: 1.5;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.hid-pasos li::before {
  content: counter(paso); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; background: #eef0f4; color: var(--ink-soft);
  transition: background .3s, color .3s;
}
.hid-pasos li b { color: var(--ink); }
.hid-pasos li.activo { border-color: rgba(47,107,255,.4); box-shadow: 0 12px 30px rgba(47,107,255,.12); transform: translateX(4px); }
.hid-pasos li.activo::before { background: var(--accent); color: #fff; }
.nota-centro { text-align: center; margin-top: 26px; font-size: 13.5px; color: #86868b; font-style: italic; }

/* --- Situaciones --- */
.situaciones { padding: 60px 24px 120px; }
.situaciones .inner { max-width: var(--maxw); margin: 0 auto; }
.situaciones .grid-para { grid-template-columns: repeat(4, 1fr); }
.situaciones .para-card .num { color: var(--accent-ink); letter-spacing: .08em; font-size: 12.5px; text-transform: uppercase; }

/* --- Comprar --- */
.comprar { padding: 130px 24px 100px; background: linear-gradient(180deg, #fafafa 0%, #eef3ff 45%, #fafafa 100%); }
.comprar .inner { max-width: var(--maxw); margin: 0 auto; }
.comprar h2 {
  font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; letter-spacing: -0.028em;
  line-height: 1.05; text-align: center; margin-bottom: 16px;
}
.comprar .lead { text-align: center; color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px); line-height: 1.55; max-width: 58ch; margin: 0 auto 50px; }
.compra { display: grid; gap: 28px; }
.modelos { border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.modelo { cursor: pointer; position: relative; }
.modelo input { position: absolute; opacity: 0; pointer-events: none; }
.modelo .tarjeta {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  background: #fff; border: 2px solid rgba(0,0,0,.07); border-radius: 22px; padding: 22px 22px 20px;
  box-shadow: 0 12px 34px rgba(0,0,0,.05); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.modelo .tarjeta:hover { transform: translateY(-2px); }
.modelo input:checked + .tarjeta { border-color: var(--accent); box-shadow: 0 16px 40px rgba(47,107,255,.16); }
.modelo input:focus-visible + .tarjeta { outline: 3px solid rgba(47,107,255,.35); outline-offset: 2px; }
.modelo .tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: #f0f1f4; padding: 4px 10px; border-radius: 999px;
}
.modelo .destacada .tag { background: var(--accent); color: #fff; }
.modelo b { font-size: 21px; letter-spacing: -0.015em; }
.modelo .desc { color: var(--ink-soft); font-size: 15px; line-height: 1.5; flex: 1; }
.modelo .precio { font-weight: 700; font-size: 14px; color: var(--accent-ink); }
.datos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px;
  background: #fff; border-radius: 24px; padding: 30px; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.datos label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.datos .ancho { grid-column: 1 / -1; }
.datos input, .datos select, .datos textarea {
  font: inherit; font-size: 15.5px; font-weight: 400; color: var(--ink); width: 100%;
  background: #f7f8fa; border: 1.5px solid #e1e4ea; border-radius: 12px; padding: 11px 13px;
}
.datos textarea { resize: vertical; }
.datos input:focus, .datos select:focus, .datos textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.datos input.error { border-color: #e5484d; }
.cantidad { display: flex; align-items: stretch; gap: 6px; }
.cantidad input { text-align: center; }
.cantidad button {
  flex: none; font: inherit; font-size: 20px; font-weight: 700; width: 46px; border-radius: 12px; cursor: pointer;
  background: #f0f1f4; border: 1.5px solid #e1e4ea; color: var(--ink);
}
.resumen { background: #f4f7ff; border: 1px dashed rgba(47,107,255,.35); border-radius: 14px; padding: 14px 16px; color: var(--ink-soft); font-size: 15px; }
.resumen b { color: var(--ink); }
.datos .btn { justify-self: start; }
.datos .btn:disabled { opacity: .6; cursor: wait; transform: none; }
.estado-envio { font-size: 15px; font-weight: 600; min-height: 1.4em; }
.estado-envio.ok { color: #16794a; }
.estado-envio.mal { color: #c4262c; }
.letra-chica { font-size: 12.5px; color: #86868b; }
.grid-para.cuatro { grid-template-columns: repeat(4, 1fr); }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  /* En pantallas angostas el velo es opaco para tapar el negro de la base y
     el paragolpes bajo el texto (viewer.js ajusta su alto). */
  #scrim-dia { opacity: 1; }
  .k-text { width: 90vw; }
  .k-text.hero-text { top: 11vh; }
  .k-text.abajo { bottom: 7vh; }
  .k-text.arriba { top: 9vh; }
  .k-text h1 { font-size: clamp(38px, 11vw, 60px); }
  .k-text h2 { font-size: clamp(27px, 8vw, 40px); }
  .k-text .sub { margin-top: 14px; font-size: 16px; }
  .k-text .mini { font-size: 15px; }

  .nav .links { display: none; }
  .nav { padding: 10px 16px; }
  .estudio-grid, .hid-grid { grid-template-columns: 1fr; }
  .estudio-stage { min-height: 0; aspect-ratio: 1 / 1; }
  .modelos { grid-template-columns: 1fr; }
  .grid-para.cuatro, .situaciones .grid-para { grid-template-columns: 1fr 1fr; }
  .titulo-seccion { margin-bottom: 60px; }
  .feature { grid-template-columns: 1fr; gap: 26px; margin-bottom: 90px; }
  .feature.invertida .media { order: 0; }
  .grid-specs { grid-template-columns: 1fr 1fr; }
  .ruta, .grid-para { grid-template-columns: 1fr 1fr; }
  .cita { padding: 90px 24px; }
  .anim-card { grid-template-columns: 1fr; gap: 24px; margin-bottom: 70px; }
  .anim-card.invertida .anim-stage { order: 0; }
  .anim-stage { aspect-ratio: 4 / 3.4; }
  .cta .inner { grid-template-columns: 1fr; }
  .cta .media { max-width: 320px; }
}
@media (max-width: 540px) {
  .grid-specs { grid-template-columns: 1fr; }
  .ruta, .grid-para { grid-template-columns: 1fr; }
  .strip .disco { width: 120px; height: 100px; border-radius: 18px; }
  .datos { grid-template-columns: 1fr; padding: 22px 18px; }
  .grid-para.cuatro, .situaciones .grid-para { grid-template-columns: 1fr; }
  .estudio-panel { padding: 24px 18px; }
  .features, .estudio, .movimiento, .comprar, .hid, .situaciones { padding-left: 16px; padding-right: 16px; }
}