/* ==========================================================================
   Aseptic — landing page
   Tema oscuro por defecto con variante clara ([data-theme="light"]).
   Sin dependencias externas: tipografía de sistema, iconos SVG inline.
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFÍA — IBM Plex, autoalojada (OFL)
   Tres papeles, no tres gustos:
     · Comfortaa 700 → marca y titulares. La cara redonda del logotipo, la misma
       que la guía: un producto, un titular.
     · Sans 400/600  → prosa.
     · Mono 400/500  → todo lo que el producto MIDE o NOMBRA: puertos, URLs,
       nombres de micro, etiquetas de instrumento. El monoespaciado aquí no es
       decoración retro: marca qué texto es un dato del sistema y cuál es
       nuestra voz.
   Autoalojada porque la página de privacidad promete no llamar a terceros, y
   un CDN de fuentes es una llamada a un tercero con la IP de quien lee.
   ========================================================================== */
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/comfortaa-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --bg: #0b0e14;
  --bg-soft: #10141d;
  --surface: #141925;
  --surface-2: #1a2130;
  --border: #232c3d;
  --border-soft: #1c2433;
  --text: #e7ecf5;
  --text-dim: #a5b0c2;
  --text-mute: #6f7d93;
  --accent: #7ec8d3;
  --accent-2: #c77ce0;
  --accent-ink: #0b1220;
  --ok: #35d0a0;
  --warn: #f0b429;
  --danger: #ff6b6b;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.3);
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1120px;
  /* Gradiente de marca (fijo, igual que la app): verde del líquido → cristal del vidrio. */
  --grad: linear-gradient(120deg, #4e9a55 0%, #2f7d8a 100%);
  --font: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Titulares en la redonda de la marca, la misma que la guía y el logotipo: un solo
     registro de titular en todo el producto. Antes iba en una condensada de
     señalética que no aparecía en ningún otro sitio. */
  --font-display: "Comfortaa", "Plex Sans", system-ui, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;
  --font-brand: "Comfortaa", var(--font);

  /* ---- Tríada de resolución ----
     No son «tres colores bonitos»: son los tres destinos a los que Aseptic
     puede apuntar una dependencia. Se usan SOLO con ese significado —en el
     cuadro de conexiones, en los chips y en nada más—, así que el color acaba
     enseñando el modelo mental del producto en vez de decorar. */
  --local: #34d399;
  --dev: #60a5fa;
  --mock: #c084fc;
  /* `--mono` ya existía para los `code` sueltos; ahora apunta a la misma cara que
     el resto de datos, para que un puerto se lea igual en un párrafo que en el
     cuadro de conexiones. */
  --mono: "Plex Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-soft: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --border: #dbe2ee;
  --border-soft: #e6ebf3;
  --text: #16202f;
  --text-dim: #47566c;
  --text-mute: #7b8aa1;
  --accent: #2f7d8a;
  --accent-2: #a94bc0;
  --accent-ink: #ffffff;
  --shadow: 0 20px 50px rgba(30, 50, 90, 0.12);
  --shadow-sm: 0 6px 18px rgba(30, 50, 90, 0.1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* El cursor de escritura solo donde se escribe. Por defecto el navegador lo pone
     sobre cualquier texto, y en una página que no tiene nada que teclear promete algo
     que no existe: pasas por un titular y parece un campo. Se sigue pudiendo
     seleccionar y copiar; lo que cambia es lo que el puntero anuncia. */
  cursor: default;
}
input,
textarea,
select,
[contenteditable] {
  cursor: text;
}
select {
  cursor: pointer;
}

h1,
h2,
h3 {
  line-height: 1.18;
  margin: 0 0 0.5em;
  /* Comfortaa es redonda y de ojo ancho: el tracking negativo que pedía la
     condensada aquí junta las letras hasta tocarse. */
  letter-spacing: -0.005em;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 0.1em 0.4em;
}

img,
svg {
  max-width: 100%;
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow {
  max-width: 760px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 200;
}
.skip-link:focus {
  left: 12px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  /* La etiqueta de un botón no se parte: «Iniciar sesión» caía en dos líneas en la
     cabecera y estiraba el botón por encima de los de al lado. */
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active {
  transform: translateY(0);
}
.btn-primary {
  background: var(--grad);
  color: var(--accent-ink);
  border-color: transparent;
}
.btn-ghost {
  background: transparent;
}
.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.92rem;
}
.btn-lg {
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
}
.btn-block {
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  /* Sin `not-allowed`: que esté atenuado ya dice que no se puede pulsar, y el
     cursor de prohibido es una convención más que aprender sin información nueva. */
  cursor: default;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}
.btn-ico {
  width: 1.15em;
  height: 1.15em;
}

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* En caja normal, como el resto del producto: una etiqueta en mayúsculas grita
     más que lo que etiqueta. Lo que la distingue es el color y la píldora. */
  padding: 0.2em 0.6em;
  border-radius: 999px;
  vertical-align: middle;
}
.pill-soon {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}

/* Estado de la suscripción en el portal de cuenta (account.aseptic.dev), que usa
   esta misma hoja: el verde dice «al día», el ámbar «hay que mirarlo» y el rojo «se
   acabó». Viven aquí y no en el Worker para que sean los mismos colores que el resto. */
.pill-active {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
}
.pill-past_due {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.pill-canceled,
.pill-expired {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

.pill-beta {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Banda de promoción: va ENCIMA de la cabecera pegajosa, y se va con el scroll. Si se
   quedara fija robaría alto de pantalla en todas las páginas por un anuncio. */
.promo-bar {
  background: var(--grad);
  color: var(--accent-ink);
  font-size: 0.92rem;
  text-align: center;
}
.promo-bar a {
  display: block;
  padding: 9px 24px;
  color: inherit;
}
.promo-bar a:hover {
  text-decoration: none;
  filter: brightness(1.05);
}
.promo-code {
  margin-left: 0.6em;
  opacity: 0.85;
}
.promo-code code {
  background: color-mix(in srgb, var(--accent-ink) 14%, transparent);
  border-color: transparent;
  color: inherit;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: inline-flex;
}
.brand-mark.small {
  width: 26px;
  height: 26px;
}
.brand-mark img,
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: 0.3px;
}
/* Marca del header más prominente (el footer conserva su tamaño). */
.site-header .brand-name {
  font-size: 1.6rem;
}
.site-header .brand-mark {
  width: 36px;
  height: 36px;
}
.brand-name b {
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.site-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.site-nav a {
  color: var(--text-dim);
  /* Un enlace de navegación no se parte a media etiqueta: «Cómo funciona» caía en
     dos líneas y descuadraba la altura de toda la cabecera. Si algún día no cabe,
     lo que sobra es un enlace, no media palabra. */
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
}
.site-nav a:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}
/* «Iniciar sesión» es un botón de la cabecera; en el menú desplegable de móvil
   —donde esos botones no caben— reaparece como enlace. Nunca se ven los dos.
   Lo mismo vale para el cambio de idioma (`.nav-lang`). */
.nav-login,
.nav-lang {
  display: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* En las páginas de cabecera mínima (legales, pago) el selector de idioma es lo
     único que hay a la derecha, y sin esto se pega a la marca. */
  margin-left: auto;
}
/* Selector de idioma: escrito en el idioma AL QUE lleva. «English» lo entiende quien
   no lee español, que es justo a quien va dirigido; un «ES/EN» o una bandera no —una
   bandera es un país, no una lengua. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.lang-switch .lang-ico {
  width: 1.05em;
  height: 1.05em;
  opacity: 0.85;
  flex: none;
}
.lang-switch:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}
.icon-sun {
  display: none;
}
.icon-moon {
  display: block;
}
[data-theme="light"] .icon-sun {
  display: block;
}
[data-theme="light"] .icon-moon {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Layout de secciones ---------- */
.section {
  padding: 96px 0;
  border-top: 1px solid var(--border-soft);
}
.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 0.5rem;
}
.section-sub {
  text-align: center;
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 72px 0 96px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 85% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
    radial-gradient(50% 50% at 10% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
}
.hero h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 800;
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 54ch;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 1.8rem 0 1rem;
}
.hero-meta {
  color: var(--text-mute);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Mockup app */
.hero-visual {
  position: relative;
}
.hero-glow {
  position: absolute;
  inset: -10% -10% -20% -10%;
  background: var(--grad);
  filter: blur(90px);
  opacity: 0.14;
  z-index: -1;
  border-radius: 50%;
}
.app-window {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.app-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.tb-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-weight: 600;
}
.tb-brand svg,
.tb-brand img {
  width: 16px;
  height: 16px;
}
.tb-controls {
  display: flex;
  gap: 7px;
}
.tb-controls i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
.tb-controls .tb-close {
  background: color-mix(in srgb, var(--danger) 70%, var(--border));
}
.app-body {
  display: grid;
  grid-template-columns: 46px 1fr;
}
.app-rail {
  background: var(--bg-soft);
  border-right: 1px solid var(--border-soft);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rail-item {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--surface-2);
}
.rail-item.active {
  background: var(--grad);
}
.app-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scenario-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 4px;
}
.run-btn {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: 7px;
  padding: 3px 8px;
}
.micro-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 0.85rem;
}
.mc-name {
  font-family: var(--mono);
  font-size: 0.8rem;
}
.mc-port {
  margin-left: auto;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.dot-ok {
  background: var(--ok);
}
.dot-warn {
  background: var(--warn);
}
.pulse {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
}
.badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.badge-native {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.badge-container {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 40%, transparent);
}
.badge-mock {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
.badge-infra {
  color: var(--text-mute);
  border-color: var(--border);
  margin-left: auto;
}
.log-strip {
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}
.lg-ok {
  color: var(--ok);
}
.lg-accent {
  color: var(--accent);
}

/* ---------- Problema / comparativa ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.compare-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px;
}
.compare-after {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
}
.compare-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.compare-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-dim);
}
.compare-col li {
  position: relative;
  padding-left: 26px;
  font-size: 0.96rem;
}
.compare-before li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: 700;
}
.compare-after li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
.tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.tag-bad {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--danger);
}
.tag-good {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  /* Tres columnas y no cuatro: hay NUEVE tarjetas, y con cuatro la última fila se
     quedaba con una sola y el bloque parecía cortado a media idea. */
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature-card {
  /* Columna para que el enlace a la guía caiga al fondo: con textos de distinto largo
     los enlaces quedaban a alturas distintas y la rejilla se leía descuadrada. */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.feature-card p {
  margin-bottom: 0;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-sm);
}
.feature-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  margin-bottom: 14px;
}
.feature-ico svg {
  width: 22px;
  height: 22px;
}
.feature-card h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}
.feature-card p {
  color: var(--text-dim);
  font-size: 0.94rem;
  margin: 0;
}

/* ---------- Cómo funciona ---------- */
.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: step;
}
.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.step-num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.step h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.step p {
  color: var(--text-dim);
  margin: 0;
}

/* ---------- Stacks ---------- */
.stack-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
/* Coletilla bajo los chips: las librerías locales tienen su propio registro de
   tecnologías, y conviene decirlo donde el lector está mirando los stacks. */
.stacks-note {
  margin-top: 22px;
  margin-bottom: 0;
}
.stack-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--text-dim);
}
.stack-chip span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.stack-chip.stack-on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ok) 40%, var(--border));
}
.stack-chip.stack-on span {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

/* ---------- Descarga ---------- */
.detected-os {
  display: block;
  margin-top: 6px;
  color: var(--text-mute);
  font-size: 0.92rem;
}
.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 840px;
  margin: 0 auto 2.4rem;
}
.download-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.download-card.is-highlight {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-4px);
}
.dl-ico {
  display: inline-flex;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.dl-ico svg {
  width: 40px;
  height: 40px;
}
.download-card h3 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.dl-detail {
  color: var(--text-mute);
  font-size: 0.85rem;
  min-height: 2.4em;
  margin-bottom: 16px;
}
.dl-alt-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-mute);
}
.dl-alt-link:hover {
  color: var(--accent);
}
/* Enlace al capítulo concreto de la guía. La tarjeta cuenta el qué; la guía, el cómo.
   Antes solo se enlazaba la raíz de la documentación, así que había que buscarse la
   vida — y toda la autoridad se quedaba en una sola URL. */
.card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}
.card-link::after {
  content: " →";
}
.card-link code {
  font-size: 0.85em;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

/* ---------- Capturas de la app ---------- */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.shot-wide {
  grid-column: 1 / -1;
}
.shot {
  margin: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.shot figcaption {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* ---------- Planes (DEV / PRO) ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
.plan-card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
}
.plan-card.featured {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
/* La marca del plan destacado iba en absoluto arriba a la derecha, y el resto de
   tarjetas llevaban su etiqueta pegada al nombre: tres cabeceras, tres sitios
   distintos para lo mismo. Ahora toda etiqueta vive en la cabecera de la tarjeta y
   se alinea a la derecha, así que las tres cabeceras miden y leen igual. */
.plan-flag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: var(--grad);
  padding: 0.25em 0.7em;
  border-radius: 999px;
}
.plan-head {
  display: flex;
  align-items: center;
  gap: 12px;
  /* La altura la fija el nombre del plan, no la etiqueta: una tarjeta sin etiqueta
     no puede quedar un pelo más baja que las de al lado. */
  min-height: 34px;
  margin-bottom: 12px;
}
.plan-head .pill,
.plan-head .plan-flag,
.plan-head .plan-price-inline {
  margin-left: auto;
}
.plan-name {
  font-family: var(--font-brand);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-lead {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.plan-desc {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0 0 16px;
}
.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.plan-features li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.plan-features li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.42em;
  width: 5px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.plans-more {
  text-align: center;
  margin: 26px 0 0;
  font-size: 0.95rem;
}
.plans-more a {
  color: var(--accent);
  text-decoration: none;
}
.plans-more a:hover {
  text-decoration: underline;
}

/* ---------- FAQ ---------- */
/* El FAQ usaba un contenedor estrecho (760 px) mientras el resto de secciones van a
   1120: empezaba 180 px más a la derecha y se leía como un bloque descolgado. Ahora
   comparte contenedor con todo lo demás y la MEDIDA DE LECTURA se controla donde
   toca —en el texto de la respuesta—, no encogiendo la sección entera. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 20px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-body {
  padding: 0 20px 18px;
  color: var(--text-dim);
}
.faq-body p {
  margin: 0;
  max-width: 78ch;
}

/* ---------- CTA final ---------- */
.cta-final {
  border-top: 1px solid var(--border-soft);
}
.cta-box {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 52px 32px;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--surface);
}
.cta-box h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}
.cta-box p {
  color: var(--text-dim);
  max-width: 46ch;
  margin: 0 auto 1.6rem;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 40px 0 32px;
  background: var(--bg-soft);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-tag {
  color: var(--text-mute);
  font-size: 0.85rem;
  margin: 2px 0 0;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-nav a {
  color: var(--text-dim);
  font-size: 0.92rem;
}
.footer-bottom {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-mute);
  font-size: 0.85rem;
}
.footer-bottom p {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-visual {
    /* El cuadro deja de ir PRIMERO en pantallas estrechas: sin el titular delante
       es un panel de datos sin contexto, y quien llega no sabe qué está mirando. */
    max-width: 480px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Entre el corte del menú (1300) y los 1440 px la barra cabe, pero por poco: en
   español pedía 1400 y dejaba 48 px de desbordamiento a 1301 y 15 a 1366 —justo la
   resolución de portátil más común—. Se recorta el respiro de los enlaces, que a esos
   anchos no se nota, en vez de bajar el corte a 1400 y plegar el menú en un portátil.
   Por debajo de 1300 esto da igual: ahí la nav es un panel y manda su propio padding. */
@media (max-width: 1440px) {
  .site-nav {
    gap: 2px;
  }
  .site-nav a {
    padding: 8px 8px;
  }
}

/* LA CABECERA COLAPSA MUCHO ANTES QUE EL CONTENIDO, y por eso tiene su propio corte.
   Con los seis enlaces desplegados la fila mide 1259 px que no se encogen —marca 177,
   nav 630, acciones 380, más huecos—, así que en español no cabía por debajo de
   1400 px: a 1366 se desbordaba 18 px, a 1280 58 px y a 1024 242 px, con scroll
   horizontal en toda la página. En inglés aguantaba hasta 1200 solo porque las
   etiquetas son más cortas, que es otra forma de decir que no cabía.
   El corte va en 1300 y no en 1400 para que un portátil de 1366 conserve la barra. */
@media (max-width: 1300px) {
  .site-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px;
    margin: 0;
    transform: translateY(-120%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow);
  }
  .site-nav.open {
    transform: translateY(0);
  }
  .site-nav a {
    padding: 14px 8px;
    border-bottom: 1px solid var(--border-soft);
  }
  .nav-toggle {
    display: flex;
    order: 3;
  }
  /* Con el menú plegado se escondía TODA acción de la cabecera, y el resultado era
     una página de precios sin un solo botón hasta bien entrado el scroll. Se queda la
     acción principal —la única que la página siempre quiere— y se va la secundaria,
     que reaparece dentro del menú. */
  .header-actions .btn-ghost {
    display: none;
  }
  /* El selector de idioma baja al menú por lo mismo. Con él en la cabecera, en un
     móvil de 375 px la fila pedía 449 px: el botón del menú quedaba FUERA de la
     pantalla, a 74 px del borde, y no había forma de abrirlo. Es lo que menos falta
     hace arriba: el idioma se cambia una vez, el menú se usa siempre. */
  .header-actions .lang-switch {
    display: none;
  }
  .site-nav .nav-login,
  .site-nav .nav-lang {
    display: block;
    color: var(--accent);
    font-weight: 600;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 68px 0;
  }
  /* La marca cede tamaño: es lo que menos falta hace en una pantalla estrecha. */
  .site-header .brand-name {
    font-size: 1.25rem;
  }
  .site-header .brand-mark {
    width: 30px;
    height: 30px;
  }
  .header-inner {
    gap: 12px;
  }
  /* Por debajo de 480 px ya no sobra un píxel en la cabecera: con la marca, el
     conmutador de tema, «Descargar» y el botón del menú no se llega. Se aprieta lo
     que no cuesta nada —espaciados y tamaño del botón— en vez de quitar controles.
     Medido: a 360 px de ancho la fila pedía 379 px y ahora pide 331. */
  @media (max-width: 480px) {
    .site-header .brand-name {
      font-size: 1.1rem;
    }
    .header-inner {
      gap: 8px;
    }
    .header-actions {
      gap: 4px;
    }
    .site-header .btn-sm {
      padding: 7px 10px;
      font-size: 0.85rem;
    }
  }
  /* Los 320 px siguen existiendo (iPhone SE de primera hornada y Android viejo), y
     ahí ni con lo de arriba se llega. Cede la marca, que es lo único de la fila que
     no hace nada: el matraz solo ya identifica el sitio. */
  @media (max-width: 360px) {
    .container {
      padding-left: 10px;
      padding-right: 10px;
    }
    .site-header .btn-sm {
      padding: 7px 8px;
    }
    .site-header .brand-name {
      font-size: 1rem;
    }
    .site-header .brand-mark {
      width: 26px;
      height: 26px;
    }
  }
  .compare,
  .download-grid,
  .shot-grid {
    grid-template-columns: 1fr;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Preferencias de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Documentos legales (privacidad, términos, encargo…) ---------- */
.legal-doc {
  /* 780 px a 15 px daban 107 caracteres por línea, y el rango legible son 60-80: en
     un documento que se lee entero —y estos se leen— la vista pierde el renglón al
     saltar de línea. Con 640 se queda en ~85, que ya es un ancho de lectura. Las
     tablas no sufren: van dentro de .legal-table-wrap, que tiene su propio scroll. */
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 20px 90px;
}
/* Entradilla de una página secundaria, con el mismo aire que la portada de la guía:
   titular grande en la redonda de marca y teñido con el degradado, centrado y con
   sitio a su alrededor. Antes eran documentos que empezaban de golpe, y al lado de la
   portada parecían de otro sitio. */
.legal-doc h1 {
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.15;
  text-align: center;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* El degradado recorta las colas de las letras (la «j», la «g») si la caja va justa. */
  padding-bottom: 0.08em;
  margin: 0 0 10px;
}
.legal-doc .doc-meta {
  color: var(--text-mute);
  font-size: 14px;
  text-align: center;
  margin: 0 0 44px;
}
/* Primer párrafo: entra un punto más grande, como la tagline de la guía. */
.legal-doc .doc-lead {
  font-size: 1.08rem;
  color: var(--text);
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 8px;
}
.legal-doc h2 {
  font-size: 19px;
  margin: 34px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.legal-doc h3 {
  font-size: 15px;
  margin: 22px 0 8px;
  color: var(--text-dim);
}
.legal-doc p,
.legal-doc li,
.legal-doc td,
.legal-doc th {
  color: var(--text-dim);
  line-height: 1.65;
  font-size: 15px;
}
.legal-doc ul,
.legal-doc ol {
  padding-left: 22px;
  margin: 10px 0;
}
.legal-doc li {
  margin: 6px 0;
}
.legal-doc a {
  color: var(--accent);
}
.legal-doc strong {
  color: var(--text);
}
/* Una comparativa necesita más ancho que un documento de lectura: son cuatro columnas
   y el ancho de lectura de 640px las deja en una tira ilegible. */
.doc-compare {
  max-width: 900px;
}

/* Las tablas de un documento legal se leen en móvil o no se leen. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 14px 0;
}
.legal-doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
}
.legal-doc th,
.legal-doc td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal-doc th {
  color: var(--text);
  font-weight: 600;
}
.legal-doc blockquote {
  border-left: 3px solid var(--accent);
  margin: 16px 0;
  padding: 2px 0 2px 16px;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}
.legal-back:hover {
  text-decoration: underline;
}

/* =====================================================================
   Pago (/checkout)
   Es la única página del sitio que se abre DESDE la app y con una compra
   ya empezada: no lleva navegación (nada que explorar aquí) y se centra
   en la ventana, para que el único texto que hay caiga donde mira quien
   acaba de pulsar «comprar».
   ===================================================================== */
.checkout {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: 40px 20px 80px;
}
.checkout-card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 32px;
}
/* La marca de la tarjeta es mayor que la del header: aquí es lo primero que se
   mira, y `.brand-mark` global mide 30px, pensado para ir junto al wordmark. */
.checkout-card .brand-mark {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
}
/* Rótulo de instrumento, en la misma mono que los datos del resto del sitio. */
.checkout-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-mute);
  margin: 0 0 6px;
}
.checkout-card h1 {
  font-size: 1.7rem;
  /* Mismo titular teñido que el resto de páginas secundarias: quien paga tiene que
     ver la misma marca que en la portada, no un formulario cualquiera. */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.08em;
  margin: 0 0 14px;
}
/* El latido va DEBAJO del titular: encima competía con la marca por el primer
   golpe de vista, que es justo lo que la marca tiene que ganar aquí. */
.checkout-card .checkout-pulse {
  margin: 0 auto 16px;
}
.checkout-msg {
  color: var(--text-dim);
  margin: 0 0 8px;
}
.checkout-note {
  font-size: 0.9rem;
  color: var(--text-mute);
  border-top: 1px solid var(--border-soft);
  margin: 24px 0 0;
  padding-top: 20px;
}
.checkout-done {
  color: var(--ok);
  font-weight: 600;
}
/* Latido mientras se abre la pasarela: dice «esto sigue vivo» sin ser un
   spinner que gire para siempre si algo falla. */
.checkout-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 auto 20px;
  animation: checkout-beat 1.4s ease-in-out infinite;
}
@keyframes checkout-beat {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-pulse { animation: none; opacity: 0.8; }
}

/* Precio junto al nombre del plan en el resumen de la home. La ficha completa vive
   en /pricing; aquí solo se adelanta la cifra para no obligar a saltar de página
   para saber cuánto cuesta. */
.plan-price-inline {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* ==========================================================================
   LA VENTANA DE ASEPTIC (héroe)

   La tesis del producto no es «arranca microservicios» —eso lo hace un
   docker compose—, es que CADA DEPENDENCIA se puede reenrutar a local, DEV o
   mock sin tocar el repositorio. Por eso el héroe no es una captura muerta:
   es el mecanismo, y se puede tocar. Cambiar un conmutador reescribe la URL
   efectiva delante de quien mira, que es justo lo que hace Aseptic al
   levantar el escenario.

   Y se pinta con el cromo REAL de la app: la barra superior con el wordmark y
   el título «Apartado | sujeto», la tarjeta de contenido sobre el fondo
   elevado, y el panel de dependencias con sus bandas alternas y su control
   segmentado. Las medidas y los colores salen de `ui/src/app/app.scss` y
   `ui/src/app/dependency-panel/dependency-panel.scss`; se copian aquí en
   tokens propios (`--aw-*`) porque la web no comparte hoja con la app. Si la
   app cambia de paleta, esto se queda desfasado: es el precio de que quien
   llega vea la herramienta antes de descargarla.
   ========================================================================== */
.app-window {
  /* Paleta de la app, no la de la web. La web es más oscura y más azul; usar
     sus tokens aquí haría que la ventana no se pareciera a lo que se descarga. */
  --aw-bg: #161b24;
  --aw-elev: #1b202c;
  --aw-panel: #212935;
  --aw-panel-2: #2d3747;
  --aw-border: #3c495e;
  --aw-border-soft: #28303f;
  --aw-text: #e6eaf2;
  --aw-muted: #9ba3b6;
  --aw-accent: #73bfcc;
  --aw-ok: #86d6a8;
  --aw-warn: #f0cf94;

  background: var(--aw-bg);
  border: 1px solid var(--aw-border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Con el sitio en claro, la app se enseña en claro: es el mismo producto con su
   propio tema, no una captura que ignora la preferencia de quien mira. */
[data-theme="light"] .app-window {
  --aw-bg: #f4f6fb;
  --aw-elev: #ffffff;
  --aw-panel: #ffffff;
  --aw-panel-2: #eef1f8;
  --aw-border: #d6dce8;
  --aw-border-soft: #e7ebf4;
  --aw-text: #1c2330;
  --aw-muted: #5c6677;
  --aw-accent: #2f7d8a;
  --aw-ok: #2d7952;
  --aw-warn: #8c631e;
}

/* ---------- Barra superior (34px de alto + 8px de aire, como en la app) ---------- */
.aw-topbar {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 8px 12px 0 12px;
  color: var(--aw-text);
}
.aw-wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.aw-wordmark b {
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.aw-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 12px;
  min-width: 0;
}
/* «Apartado | sujeto»: el apartado atenuado (contexto), el separador más aún y el
   sujeto a color pleno (el foco). Igual que el `h1` del topbar de la app. */
.aw-heading {
  font-size: 14px;
  font-weight: 650;
  color: var(--aw-text);
  white-space: nowrap;
}
.aw-section {
  color: var(--aw-muted);
  font-weight: 600;
}
.aw-sep {
  margin: 0 7px;
  color: var(--aw-muted);
  opacity: 0.6;
}
.aw-subtitle {
  font-size: 12px;
  color: var(--aw-muted);
  white-space: nowrap;
}
.aw-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.aw-state-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aw-ok);
}
.aw-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--aw-border);
  color: var(--aw-ok);
}
.aw-play svg {
  width: 13px;
  height: 13px;
}

/* ---------- Tarjeta de contenido (la «main» de la app) ---------- */
.aw-main {
  background: var(--aw-elev);
  border-radius: 8px;
  margin: 8px;
  padding: 12px;
}

/* ---------- Panel de dependencias ---------- */
.patch {
  background: var(--aw-panel);
  border: 1px solid var(--aw-border);
  border-radius: 10px;
  padding: 12px 16px;
}
.patch-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.patch-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--aw-text);
}
.patch-hint {
  font-size: 11px;
  color: var(--aw-muted);
  margin-left: auto;
}
/* Bandas alternas para seguir la fila sin perderse, con el margen negativo que las
   lleva a los bordes internos del panel — el mismo recurso que la app. */
.patch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  margin: 0 -16px;
  border-radius: 6px;
}
.patch-row:nth-of-type(even) {
  background: var(--aw-panel-2);
}
/* El modo de la fila decide el color, y lo heredan el conmutador y la URL. Con esto
   el JS solo cambia un atributo: no toca ni un estilo. Los tres colores son los de
   la app —local verde, DEV ámbar, mock el color de acento—, no otros. */
.patch-row[data-mode="local"] { --mode-color: var(--aw-ok); }
.patch-row[data-mode="dev"] { --mode-color: var(--aw-warn); }
.patch-row[data-mode="mock"] { --mode-color: var(--aw-accent); }
.patch-main {
  flex: 1;
  min-width: 0;
}
.patch-dep {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--aw-text);
}
.patch-arrow {
  color: var(--aw-muted);
  padding: 0 0.35em;
}
/* La URL efectiva: el resultado observable de mover el conmutador. Se tiñe con
   el color del modo activo, así que el color y el texto dicen lo mismo — quien
   no distinga los tonos lee igualmente el destino. */
.patch-url {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mode-color, var(--aw-muted));
  margin-top: 2px;
  overflow-wrap: anywhere;
  transition: color 0.18s ease;
}
/* Control segmentado: rectángulo con divisores, como el de la app. No una píldora:
   la píldora era invención de la web y no existe en el producto. */
.patch-switch {
  display: inline-flex;
  border: 1px solid var(--aw-border);
  border-radius: 7px;
  overflow: hidden;
}
.patch-switch button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--aw-muted);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--aw-border);
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.patch-switch button:first-child {
  border-left: 0;
}
.patch-switch button:hover:not([aria-pressed="true"]) {
  background: var(--aw-panel-2);
  color: var(--aw-text);
}
.patch-switch button[aria-pressed="true"] {
  background: var(--mode-color);
  /* Texto = fondo del panel, para que contraste sobre el color del segmento: con
     blanco, el ámbar de DEV apenas se leía. */
  color: var(--aw-panel);
}
.patch-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--aw-muted);
}
.patch-foot b {
  color: var(--aw-text);
  font-weight: 600;
  /* «Al levantar» es una etiqueta, no una frase: no se parte en dos líneas. */
  white-space: nowrap;
}

/* Titulares en la condensada, con el tracking apretado que pide un ancho
   estrecho. Aquí es donde la página deja de sonar a plantilla. */
h1,
h2,
.section-title,
.plan-price {
  font-family: var(--font-display);
  letter-spacing: -0.005em;
}
.hero h1 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.eyebrow,
.plan-name,
.stack-chip,
.mc-port,
.dl-detail {
  font-family: var(--font-mono);
}

/* La ventana en pantalla estrecha: la fila pasa a una columna. En dos, el nombre del
   micro se partía a media palabra (bff- / catalog) y el conmutador se solapaba con
   la URL. El subtítulo de la barra sobra antes que el título. */
@media (max-width: 720px) {
  .patch-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .patch-switch {
    width: 100%;
  }
  .patch-switch button {
    flex: 1;
  }
  .aw-subtitle {
    display: none;
  }
  .patch-head {
    flex-wrap: wrap;
  }
  .patch-hint {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* Aviso de prevalencia en la traducción de un documento legal. Va destacado y arriba
   del todo: quien lo lee tiene que saber ANTES de leerlo que lo que firma es el otro
   texto, no este. */
.legal-prevail {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 0 0 28px;
  font-size: 0.92rem;
}

/* ---------- Página de precios ---------- */
/* Tres columnas: el `.plan-grid` de la landing está pensado para dos. */
.plan-grid.plan-grid-3 {
  max-width: 1080px;
}
.plan-price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.plan-price small {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-mute);
  margin-top: 2px;
}
/* Lo que un plan NO trae. Se enseña en vez de omitirse: la diferencia entre
   planes es justo eso, y una lista que solo suma obliga a compararlas a ojo. */
.plan-features li.plan-no {
  color: var(--text-mute);
}
.plan-features li.plan-no::before {
  background: color-mix(in srgb, var(--text-mute) 14%, transparent);
}
.plan-features li.plan-no::after {
  left: 5.5px;
  top: 0.42em;
  width: 5px;
  height: 5px;
  border: 0;
  border-top: 2px solid var(--text-mute);
  transform: none;
}
/* Los tres botones a la misma altura pese a listas de distinto largo: el
   escalón entre tarjetas se lee como si una ofreciera menos. */
.plan-grid-3 .plan-card {
  display: flex;
  flex-direction: column;
}
.plan-grid-3 .plan-card .btn {
  margin-top: auto;
  padding-top: 0.85em;
  padding-bottom: 0.85em;
}
.plan-grid-3 .plan-features:last-of-type {
  margin-bottom: 22px;
}
.plan-sep {
  margin: 14px 0 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-mute);
}
.price-note {
  max-width: 760px;
  margin: 54px auto 0;
}
.price-note h2 {
  font-size: 1.12rem;
  margin: 34px 0 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.price-note h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.price-note p,
.price-note li {
  color: var(--text-dim);
  line-height: 1.65;
  font-size: 0.95rem;
}
.price-note ul {
  padding-left: 22px;
}
.price-note li {
  margin: 6px 0;
}
.price-note strong {
  color: var(--text);
}
.price-note a {
  color: var(--accent);
}