/* ============================================================================
   TorqenttraCore — landing

   Los colores, tipografía y espaciados NO se definen aquí: vienen de
   design-system.css, el sistema de diseño que salió de Claude Design. Este
   archivo solo acomoda las secciones usando esas variables. Si algún día cambia
   el color de acento, se cambia allá una vez y aquí no se toca nada.
   ============================================================================ */

/* ── El color de acento ───────────────────────────────────────────────────────
   `design-system.css` trae morado (#9184d9), pero ese es el color genérico del
   sistema. El diseño de TorqenttraCore lo cambia a un azul (#6ba7e0) desde un
   ajuste del editor de Claude Design — y ese ajuste NO viaja en el archivo
   exportado, así que al copiar el sistema tal cual se venía el morado.

   Se corrige aquí y no editando `design-system.css` a propósito: ese archivo es
   una copia del sistema de diseño, y si algún día se vuelve a copiar desde
   Claude Design, el cambio se perdería. Aquí sobrevive.

   La escala se arma con hsl() en vez de códigos hexadecimales sueltos: el tono
   (209°) es el mismo en todos los pasos y solo cambian claridad y saturación,
   así se ve de un vistazo que son el mismo color y no nueve colores distintos.
   Cambiar el tono de toda la página es cambiar ese 209. */
:root {
  --color-accent: #6ba7e0;              /* = hsl(209, 65%, 65%) */
  --color-accent-100: hsl(209, 100%, 97%);
  --color-accent-200: hsl(209, 90%, 93%);
  --color-accent-300: hsl(209, 82%, 86%);
  --color-accent-400: hsl(209, 72%, 76%);
  --color-accent-500: hsl(209, 65%, 65%);
  --color-accent-600: hsl(209, 55%, 53%);
  --color-accent-700: hsl(209, 50%, 42%);
  --color-accent-800: hsl(209, 45%, 31%);
  --color-accent-900: hsl(209, 40%, 21%);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }

/* El salto de los enlaces del menú se detiene ANTES de la sección, para que la
   barra fija no le tape el encabezado al que acaba de llegar. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Tipografía ───────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.4vw, 88px); line-height: 0.98; }
h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: var(--space-6); }
h3 { font-size: 19px; letter-spacing: -0.02em; }

p { margin: 0; text-wrap: pretty; }

.acento { color: var(--color-accent); }

.eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-6);
}
.eyebrow__linea { width: 26px; height: 1px; background: var(--color-accent); flex: 0 0 auto; }

.seccion { padding: 96px 0; }
.seccion--apretada { padding: 40px 0 96px; }
.seccion__bajada {
  font-size: 17px; line-height: 1.6; max-width: 560px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin-bottom: calc(var(--space-8) * 2);
}

/* ── Botones ──────────────────────────────────────────────────────────────
   .btn/.btn-primary/.btn-secondary vienen del sistema de diseño; aquí solo se
   agregan los tamaños que usa la landing. */

.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn-lg { font-size: 15px; padding: 14px 26px; }
.btn-block { width: 100%; font-size: 15px; padding: 14px; }

/* ── Barra de navegación ──────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-6);
  padding: 14px 24px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.nav__marca {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-text); font-size: 14px; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; margin-right: auto;
}
.nav__marca img { width: 26px; height: 26px; }
.nav__links { display: flex; align-items: center; gap: var(--space-2); }
.nav__links a {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 68%, transparent);
  /* El borde va transparente desde el principio, no aparece con el estado
     activo: si naciera ahí, el enlace crecería 2px al marcarse y empujaría a
     los de al lado cada vez que cambias de sección. */
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav__links a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
/* La sección que estás viendo. */
.nav__links a.is-aqui {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-300);
}
.nav__cta { padding: var(--space-3) var(--space-6); font-size: 13px; }
.nav__menu { display: none; }

/* ── Portada ──────────────────────────────────────────────────────────────── */

.portada { position: relative; padding: 72px 0 64px; overflow: hidden; }
.portada__halo {
  position: absolute; top: -120px; right: -180px; width: 820px; height: 760px;
  /* La versión -halo (400px, 85 KB) y no el original (919px, 448 KB): con
     blur(52px) el detalle fino desaparece de todos modos, así que cargar la
     resolución completa solo sería peso sin beneficio. */
  background: url(torqenttracore-mark-halo.png) center / contain no-repeat;
  filter: blur(52px); opacity: 0.16; pointer-events: none;
}
.portada__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center; gap: 48px;
}
.portada__texto { max-width: 660px; }
.portada__bajada {
  font-size: 19px; line-height: 1.6; max-width: 520px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: var(--space-8) 0 calc(var(--space-8) * 1.5);
}
.portada__botones { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: calc(var(--space-8) * 2); }
.portada__pie {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent);
  animation: pulso 2.4s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.portada__imagen img {
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 48px color-mix(in srgb, var(--color-accent) 20%, transparent), var(--shadow-lg);
}

/* ── Collage de dispositivos ──────────────────────────────────────────────────
   Todo es trazo puro (bordes y bloques), no imágenes: pesa nada, se ve nítido en
   cualquier pantalla y toma los colores del sistema de diseño. */

.collage {
  position: relative; width: min(100%, 620px);
  margin: 0 auto; padding-bottom: 20px;
  height: 19vw; min-height: 200px; max-height: 270px;
}
.collage__halo {
  position: absolute; left: 50%; top: 44%;
  width: 720px; height: 520px; max-width: 100%;
  margin: -260px 0 0 -360px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 13%, transparent) 0%, transparent 68%);
  animation: latido 6s ease-in-out infinite; pointer-events: none;
}
@keyframes latido { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }

/* Cada dispositivo. `--dx`/`--dy` los mueve el script según el cursor. */
.dv {
  position: absolute;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.dv--panel    { left: 3%;    bottom: 8%;  width: 16%; }
.dv--monitor  { left: 22%;   right: 30%;  bottom: 0; display: flex; flex-direction: column; align-items: center; }
.dv--celular  { left: 21.5%; bottom: 3%;  width: 8.5%; min-width: 74px; }
.dv--reportes { right: 1%;   bottom: 9%;  width: 26%; }

.dv__marco {
  position: relative; width: 100%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--color-accent) 14%, transparent);
  aspect-ratio: 3 / 4.1; padding: 5%;
}
.dv__marco--ancho { aspect-ratio: 16 / 10; padding: 1.8%; }
.dv__marco--celular { aspect-ratio: 9 / 18.5; border-radius: 14px; padding: 5px; }

.dv__pantalla {
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: 3px; padding: 6px;
}
.dv__pantalla--monitor { gap: 0; padding: 0; border-radius: 4px; }
.dv__pantalla--celular { gap: 5px; border-radius: 10px; padding: 7px; }

.dv__titulo {
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent) 90%, transparent);
}

/* Panel de órdenes */
.dv__fila {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.dv__punto { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 70%, transparent); }
.dv__punto--tenue { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.dv__lineas { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dv__lineas i { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 26%, transparent); }
.dv__lineas i:last-child { background: color-mix(in srgb, var(--color-text) 12%, transparent); }

/* Monitor */
.dv__barra {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.dv__logo {
  width: 14px; height: 14px; display: grid; place-items: center;
  border: 1px solid var(--color-accent); border-radius: 4px;
  font-size: 8px; color: var(--color-accent);
}
.dv__nombre { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.dv__vivo { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: pulso 2.4s ease-in-out infinite; }
.dv__cols { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); align-content: start; }
.dv__cols > div { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.dv__col-t { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 42%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv__tarjeta { display: block; height: 11px; border-radius: 3px; background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.dv__tarjeta--llena { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.dv__pie {
  flex: 0 0 auto; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}
.dv__monto { font-size: 10px; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.dv__cuello { width: 9%; height: 30px; border-inline: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); }

/* Celular */
.dv__notch { width: 30%; height: 3px; margin: 0 auto var(--space-1); border-radius: 99px; background: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.dv__linea { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 28%, transparent); }
.dv__linea--tenue { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.dv__boton { display: block; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--color-accent) 26%, transparent); }
.dv__boton:first-of-type { margin-top: auto; }
.dv__boton--hueco { background: transparent; border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }

/* Reportes */
.dv__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.dv__kpis span { border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: 3px; padding: 5px 6px; min-width: 0; }
.dv__kpis b { display: block; font-size: 7px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 40%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv__kpis em { display: block; font-size: 11px; font-style: normal; letter-spacing: -0.02em; margin-top: 2px; }
.dv__barras { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 5px; }
.dv__barras span { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 45%, transparent) 0%, color-mix(in srgb, var(--color-accent) 8%, transparent) 100%); }
.dv__barras span.dv__barra--hoy { background: linear-gradient(180deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 8%, transparent) 100%); }

/* Bases (las patitas de cada aparato) */
.dv__base { border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); }
.dv__base--panel { width: 34%; height: 3px; margin: 6px auto 0; border-radius: 99px; background: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.dv__base--monitor { width: 28%; height: 7px; border-radius: 99px; }
.dv__base--reportes { width: 116%; margin-left: -8%; height: 9px; border-top: none; border-radius: 0 0 6px 6px; background: color-mix(in srgb, var(--color-bg) 92%, transparent); }

/* ── Cinta ────────────────────────────────────────────────────────────────── */

.cinta {
  border-block: 1px solid var(--color-divider);
  padding: var(--space-6) 0; overflow: hidden;
}
.cinta__pista {
  display: flex; gap: var(--space-8); width: max-content;
  font-size: 13px; letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  animation: correr 38s linear infinite;
}
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Rejillas ─────────────────────────────────────────────────────────────── */

.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.rejilla-3--funciones { gap: calc(var(--space-8) * 1.4); }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }

/* ── Problemas ────────────────────────────────────────────────────────────── */

.dolor { padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.dolor__n {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  color: var(--color-accent); margin-bottom: var(--space-4);
}
.dolor h3 { margin-bottom: var(--space-3); }
.dolor p { font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 58%, transparent); }

/* ── Cifras ───────────────────────────────────────────────────────────────── */

.cifra { display: flex; flex-direction: column; gap: var(--space-3); }
.cifra__n {
  font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px);
  font-weight: var(--font-heading-weight); letter-spacing: -0.04em;
  line-height: 1; color: var(--color-accent);
}
.cifra__t { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ── Funciones ────────────────────────────────────────────────────────────── */

.funcion {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(var(--space-8) * 1.5) 28px 28px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface) 70%, transparent) 0%, var(--color-neutral-900) 58%);
  border: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  border-radius: var(--radius-lg);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.funcion:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  box-shadow: var(--shadow-md);
}

/* El número enorme y casi invisible del fondo. Es decoración: se marca como
   oculto para lectores de pantalla y no se puede seleccionar, para que no
   estorbe al copiar el texto de la tarjeta. */
.funcion__fantasma {
  position: absolute; top: -34px; right: -6px;
  font-family: var(--font-heading); font-size: 132px; font-weight: 500;
  line-height: 1; letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--color-text) 4%, transparent);
  pointer-events: none; user-select: none;
}
/* El filo de luz del borde superior. */
.funcion__filo {
  position: absolute; top: 0; left: 28px; right: 28px; height: 1px; opacity: .55;
  background: linear-gradient(90deg, var(--color-accent) 0%, transparent 70%);
}

.funcion__top { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); }
.funcion__icono {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-radius: var(--radius-md); color: var(--color-accent);
}
.funcion__icono svg { width: 19px; height: 19px; display: block; }
.funcion__kicker {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

.funcion h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: var(--space-4); }
.funcion__cuerpo {
  font-size: 15px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 56%, transparent);
  margin-bottom: calc(var(--space-8) * 1.5);
}

/* La lista se pega abajo para que las seis tarjetas terminen parejas aunque los
   textos tengan distinto largo. */
.funcion__lista {
  list-style: none; margin: auto 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.funcion__lista li {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.funcion__lista li::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 1px;
  background: var(--color-accent); transform: translateY(-4px);
}

/* ── Ventana simulada de la app ───────────────────────────────────────────── */

.app {
  display: flex; min-height: 560px; overflow: hidden;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.app__nota {
  margin-top: var(--space-6); font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* Barra lateral */
.app__lateral {
  flex: 0 0 232px; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--color-neutral-900);
  border-right: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.app__marca { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-2); }
.app__logo {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--color-accent); border-radius: var(--radius-md);
  font-size: 12px; color: var(--color-accent);
}
.app__marca-txt { display: grid; min-width: 0; }
.app__marca-txt b { font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.app__marca-txt i { font-size: 10px; font-style: normal; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.app__taller {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); font-size: 13px;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: var(--radius-md);
}
.app__taller span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__caret { color: color-mix(in srgb, var(--color-text) 40%, transparent); font-size: 11px; }
.app__nav { display: flex; flex-direction: column; gap: 2px; }
.app__navbtn {
  display: block; width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: inherit; font-size: 13px;
  background: transparent; border: none; border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  cursor: pointer; transition: background .2s ease, color .2s ease;
}
.app__navbtn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.app__navbtn:disabled { cursor: default; opacity: .55; }
.app__navbtn.is-activo {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent-300);
}
.app__usuario {
  margin-top: auto; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); font-size: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.app__avatar {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent-300); font-size: 11px;
}

/* Contenido */
.app__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app__barra {
  display: flex; align-items: center; gap: var(--space-6);
  padding: 14px var(--space-8); font-size: 15px;
  background: var(--color-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.app__url { margin-left: auto; font-size: 12px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.app__vista { padding: 28px; min-height: 480px; }
.app__vista[hidden] { display: none; }

/* Tablero */
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.col {
  background: var(--color-neutral-900);
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: var(--radius-md); min-height: 240px;
  transition: background .2s ease, border-color .2s ease;
}
.col.is-encima {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-style: dashed; border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.col header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.col__n {
  min-width: 20px; padding: 1px 6px; border-radius: 99px; text-align: center;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent-300); letter-spacing: 0;
}
.col__lista { display: flex; flex-direction: column; gap: var(--space-4); padding: 14px; min-height: 60px; }

.orden {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: var(--radius-md); padding: 14px; cursor: grab;
  transition: border-color .2s ease, opacity .2s ease;
}
.orden:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.orden.is-arrastrando { opacity: .45; border-color: color-mix(in srgb, var(--color-accent) 80%, transparent); }
.orden__id { font-size: 12px; color: var(--color-accent); margin-bottom: var(--space-2); }
.orden__car { font-size: 15px; margin-bottom: var(--space-1); }
.orden__job { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 14px; }
.orden footer { display: flex; align-items: center; justify-content: space-between; }
.orden__who {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent-300); font-size: 10px; font-weight: 500;
}
.orden__precio { font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 80%, transparent); }

/* Vista inicio */
.acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.accion {
  display: grid; gap: 2px; padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: var(--radius-md);
}
.accion b { font-size: 14px; font-weight: 400; }
.accion i { font-size: 11px; font-style: normal; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-6); margin-bottom: 28px; }
.kpi {
  display: grid; gap: var(--space-2); padding: var(--space-8);
  background: var(--color-neutral-900);
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: var(--radius-md);
}
.kpi__l { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.kpi__v { font-family: var(--font-heading); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.kpi__d { font-size: 12px; color: var(--color-accent); }

.grafica {
  padding: var(--space-8) var(--space-8) var(--space-6);
  background: var(--color-neutral-900);
  border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  border-radius: var(--radius-md);
}
.grafica__t { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 45%, transparent); margin-bottom: var(--space-8); }
.grafica__barras { display: flex; align-items: flex-end; gap: var(--space-6); height: 180px; }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--space-3); height: 100%; }
.barra span {
  width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 55%, transparent) 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 100%);
}
.barra span.barra--hoy { background: linear-gradient(180deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 12%, transparent) 100%); }
.barra i { font-size: 11px; font-style: normal; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* ── Precios ──────────────────────────────────────────────────────────────── */

/* Centradas y despegadas del título: son el punto al que llega toda la página,
   y pegadas al encabezado se leían como una continuación de él en vez de como
   la decisión que son. */
.planes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  max-width: 860px; margin-inline: auto;
  margin-top: calc(var(--space-8) * 2.5);
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: calc(var(--space-8) * 1.5) 28px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.plan:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  box-shadow: var(--shadow-md);
}
.plan--destacado { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
/* La destacada ya trae el borde de acento completo: al pasar el mouse se
   levanta igual, pero conserva SU borde en vez de tomar el más tenue del hover
   -- si no, al señalarla se vería menos destacada que en reposo. */
.plan--destacado:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
.plan__cinta {
  position: absolute; top: -11px; left: 28px;
  padding: 3px var(--space-4); border-radius: 999px;
  background: var(--color-accent); color: var(--color-bg);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.plan__nombre { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.plan__precio { margin: var(--space-6) 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.plan__monto { font-family: var(--font-heading); font-size: 46px; font-weight: var(--font-heading-weight); letter-spacing: -0.04em; line-height: 1; }
.plan__mes { font-size: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.plan__periodo { font-size: 13px; color: var(--color-accent); margin-bottom: var(--space-4); }
.plan__quien { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.plan__items { list-style: none; margin: var(--space-8) 0 calc(var(--space-8) * 1.5); padding: 0; display: grid; gap: var(--space-4); }
.plan__items li {
  position: relative; padding-left: var(--space-6);
  font-size: 14px; color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.plan__items li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent);
}
/* El botón se pega abajo para que las dos tarjetas terminen parejas aunque
   una tenga una viñeta más que la otra. */
.plan__items { flex: 1; }
/* La nota se centra bajo las tarjetas: dejarla pegada a la izquierda mientras
   las tarjetas están al centro se vería como un descuido. */
.precios__nota {
  margin: calc(var(--space-8) * 1.5) auto 0; max-width: 560px;
  font-size: 13px; line-height: 1.6; text-align: center;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

/* ── Dudas ────────────────────────────────────────────────────────────────── */

.seccion--dudas { border-top: 1px solid var(--color-divider); }
.dudas__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: calc(var(--space-8) * 2); align-items: start; }
/* ── Formulario ───────────────────────────────────────────────────────────── */

.forma { display: grid; gap: var(--space-6); }
.campo { display: grid; gap: var(--space-2); }
.campo > span {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}
.campo > span i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.campo input, .campo textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--color-text);
  padding: var(--space-4); resize: vertical;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: border-color .2s ease, background .2s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: color-mix(in srgb, var(--color-text) 28%, transparent); }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}
/* Marca el campo con error solo DESPUÉS de intentar enviar (lo pone el script),
   no mientras se escribe: regañar a media captura es molesto y no ayuda. */
.forma.fue-enviada .campo input:invalid,
.forma.fue-enviada .campo textarea:invalid { border-color: #e06c75; }

/* La trampa para robots. Se saca de la pantalla en vez de usar display:none
   porque algunos programas ignoran lo que está oculto de esa forma. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.forma__error {
  margin: 0; padding: var(--space-4);
  font-size: 13px; color: #e06c75;
  background: color-mix(in srgb, #e06c75 10%, transparent);
  border: 1px solid color-mix(in srgb, #e06c75 35%, transparent);
  border-radius: var(--radius-md);
}
.forma__nota { font-size: 12px; color: color-mix(in srgb, var(--color-text) 42%, transparent); text-align: center; }
.forma button[disabled] { opacity: .55; cursor: progress; }

.forma__gracias {
  padding: calc(var(--space-8) * 1.5) 28px;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: var(--radius-lg);
}
.forma__gracias-t { font-family: var(--font-heading); font-size: 21px; margin-bottom: var(--space-3); }
.forma__gracias p:last-child { font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--color-divider); padding: var(--space-8) 0; }
.pie__grid { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; font-size: 13px; }
.pie__tenue { color: color-mix(in srgb, var(--color-text) 45%, transparent); margin-right: auto; }

/* ── Celular y tableta ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .portada__grid { grid-template-columns: 1fr; gap: 40px; }
  .rejilla-3, .rejilla-3--funciones { grid-template-columns: 1fr; gap: calc(var(--space-8) * 1.2); }
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); gap: calc(var(--space-8) * 1.5); }
  .planes { grid-template-columns: 1fr; }
  .dudas__grid { grid-template-columns: 1fr; gap: calc(var(--space-8) * 1.5); }
  .seccion { padding: 64px 0; }

  /* El menú se convierte en una lista desplegable. Los enlaces se hacen
     grandes a propósito: se tocan con el pulgar, muchas veces con las manos
     sucias de taller. */
  .nav { flex-wrap: wrap; }
  .nav__menu {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; padding: 0 9px;
    background: transparent; border: 1px solid var(--color-divider);
    border-radius: var(--radius-md); cursor: pointer;
  }
  .nav__menu span { display: block; height: 1.5px; background: var(--color-text); border-radius: 2px; }
  .nav__links {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-top: var(--space-4);
  }
  .nav--abierto .nav__links { display: flex; }
  .nav__links a { padding: 14px var(--space-4); border-top: 1px solid var(--color-divider); border-radius: 0; font-size: 15px; }
  .nav__cta { order: 2; }
}

/* La ventana simulada en pantallas chicas: se esconde la barra lateral (no cabe
   y no aporta) y el tablero se desliza de lado, que es como se usa un kanban en
   el celular de todos modos. El arrastre no funciona con el dedo —los eventos de
   arrastre del navegador son de mouse— así que ahí queda como ilustración. */
@media (max-width: 900px) {
  .app { min-height: 0; }
  .app__lateral { display: none; }
  .app__vista { padding: var(--space-6); min-height: 0; }
  .tablero {
    grid-template-columns: repeat(3, 260px);
    overflow-x: auto; padding-bottom: var(--space-4);
    /* Cada columna se detiene al centro al deslizar, en vez de quedar a medias. */
    scroll-snap-type: x mandatory;
  }
  .col { scroll-snap-align: start; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grafica__barras { height: 140px; gap: var(--space-4); }
}

@media (max-width: 560px) {
  /* El collage tiene cuatro aparatos acomodados en porcentajes: apretados en una
     pantalla de celular se encimarían y se leería peor que no ponerlo. Y ahí
     tampoco hay cursor que seguir, que es de lo que vive. */
  .collage { display: none; }
  .rejilla-4 { grid-template-columns: 1fr; }
  .portada__botones .btn { width: 100%; }
  .nav__cta { display: none; } /* El de la sección de precios basta; arriba estorba. */
  .acciones { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
}