/* ════════════════════════════════════════════════════════════════════════════
   CUHO · WEB PÚBLICA (landing + precios)
   Tema oscuro cinematográfico: aurora animada, cristal, glow púrpura.
   Solo para las páginas de marketing — login/register siguen con web.css.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #100b22;
  --bg-2: #18112f;
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .12);
  --ink: #f5f2ff;
  --ink-2: #c9c2e4;
  --muted: #968dbb;
  --purple: #8b5cf6;
  /* Azul de la burbuja del logo (no el índigo apagado de antes). */
  --purple-2: #a78bfa;
  --violet: #7c3aed;
  --blue: #4f7df9;
  /* Antes era #22d3ee (turquesa); la marca no lleva turquesa → azul claro. */
  --cyan: #60a5fa;
  --green: #34d399;
  --amber: #fbbf24;
  --grad: linear-gradient(120deg, #7c3aed, #a855f7 52%, #6d28d9);
  --grad-text: linear-gradient(105deg, #c4b5fd, #a855f7 38%, #818cf8 72%, #7cb2ff);
  --glow: 0 18px 60px rgba(124, 58, 237, .42);
  --r-lg: 22px;
  --r-md: 16px;
  --wrap: 1180px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; }
::selection { background: rgba(168, 85, 247, .45); color: #fff; }

.mk-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ── Fondo aurora + retícula (detrás de todo) ──────────────────────────────
   Absoluto, no fijo: las capas fijas a pantalla completa provocan fallos de
   composición al hacer scroll en algunos equipos (frames en negro). La aurora
   vive arriba, que es donde se ve. */
.sky {
  position: absolute; left: 0; right: 0; top: 0; height: 170vh; z-index: -2; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(124, 58, 237, .34), transparent 62%),
    radial-gradient(900px 480px at 12% 8%, rgba(139, 92, 246, .20), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(79, 125, 249, .10), transparent 60%),
    var(--bg);
}
.sky::before {
  content: ''; position: absolute; inset: -20%;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(900px 600px at 50% 0%, rgba(0,0,0,.9), transparent 75%);
}
/* Halos de la aurora SIN filter:blur (los blurs fijos gigantes rompen la
   composición al hacer scroll en algunos motores): gradientes radiales puros
   con una deriva suave por transform, que sí es barata de pintar. */
.sky i {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: drift 30s ease-in-out infinite alternate;
}
.sky i:nth-child(1) { width: 740px; height: 740px; left: -200px; top: -240px; background: radial-gradient(circle, rgba(76, 29, 149, .5), transparent 70%); }
.sky i:nth-child(2) { width: 640px; height: 640px; right: -180px; top: -120px; background: radial-gradient(circle, rgba(49, 46, 129, .48), transparent 70%); animation-duration: 36s; animation-delay: -10s; }
.sky i:nth-child(3) { width: 560px; height: 560px; left: 36%; top: 26%; background: radial-gradient(circle, rgba(124, 58, 237, .2), transparent 70%); animation-duration: 42s; animation-delay: -18s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 50px, 0) scale(1.12); }
}

/* ── Animación de aparición al hacer scroll ───────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .sky i, .mk-grad-text, .marquee-track, .hero-card { animation: none !important; }
}

/* ── NAV ──────────────────────────────────────────────────────────────────── */
.mk-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(8, 4, 18, .42);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.mk-nav.is-scrolled { background: rgba(8, 4, 18, .78); border-color: var(--line); }
.mk-nav-progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--grad);
}
/* ── Logos de marca ─────────────────────────────────────────────────────────
   ÚNICO sitio donde se pinta un logo de terceros en toda la web pública. El
   dibujo sale del fichero REAL de /assets/web/logos (el mismo que usa el panel
   en `_usgChBadge`), en blanco sobre el color de la marca. Antes cada bloque
   redibujaba la marca a mano y salían cuatro Instagram distintos, un Gmail que
   era un sobre y un WooCommerce que era un bocadillo de chat.

   --k   lado del logo en % de su cuadro de color. Va marca a marca porque está
         calculado para que la CAJA DE TINTA ocupe siempre el 20,25 % del
         cuadro: así WhatsApp (cuadrado) y Gmail (apaisado) pesan lo mismo a la
         vista. Como es un %, el MISMO número vale en el cuadro de 15 px y en el
         de 54 px: un logo, un número, idéntico en todas las páginas.
   --dx/--dy  corrigen los ficheros cuyo dibujo no está centrado en su lienzo
         (hoy solo Facebook). Van en % del propio elemento, así que no dependen
         del tamaño del cuadro.
   Ojo: el contenedor tiene que traer `color:#fff`, que es de donde sale el
   relleno (`currentColor`). */
.lgm {
  width: var(--k, 45%); height: var(--k, 45%); display: block; flex: none;
  background: currentColor;
  transform: translate(var(--dx, 0), var(--dy, 0));
  -webkit-mask-image: var(--src); mask-image: var(--src);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  /* `contain` no puede deformar nunca: los logotipos apaisados encajan, no se estiran. */
  -webkit-mask-size: contain; mask-size: contain;
}

.mk-nav-inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.mk-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.mk-logo img { width: 30px; height: 30px; border-radius: 8px; }
.mk-logo b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-nav-links { display: flex; gap: 4px; margin-left: 12px; }
.mk-nav-links a {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  padding: 9px 14px; border-radius: 10px; transition: color .15s, background .15s;
}
.mk-nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mk-nav-links a.is-active { color: #fff; background: rgba(139, 92, 246, .16); }
.mk-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mk-nav-login { font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 9px 12px; border-radius: 10px; }
/* El boton de la barra, y SOLO el de la barra: `.mk-btn` lo usan las 32
   paginas para todo, y subirlo entero seria cambiar cada boton del sitio por
   una peticion que hablaba de la cabecera. */
.mk-nav-cta .mk-btn { font-size: 15px; padding: 12px 22px; }
.mk-nav-login:hover { color: #fff; }
.mk-nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--ink); width: 40px; height: 40px; cursor: pointer; }
.mk-nav-toggle svg { width: 22px; height: 22px; }
.mk-mobile-menu {
  display: none; flex-direction: column; padding: 10px 20px 18px;
  border-top: 1px solid var(--line); background: rgba(8, 4, 18, .96);
  /* Cuelga de una barra FIJA: lo que se salga de la pantalla no hay forma de
     alcanzarlo. Con el acordeón de Producto abierto son veintitantas filas y
     se pasa de largo en cualquier móvil, así que el panel scrollea él solo. */
  max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain;
}
.mk-mobile-menu.open { display: flex; }
/* Menú móvil SIN JavaScript, para «Privacidad» y «Términos».
   Esas dos páginas son públicas a la fuerza —las revisan Meta y Google, que no
   pueden meter la contraseña del sitio—, y el candado solo deja pasar estas dos
   hojas de estilo y el logo: cualquier .js daría 401 al revisor y el menú no
   abriría. Con una casilla oculta y su etiqueta, abre sin script ninguno.
   El resto de páginas sigue con su interruptor de siempre. */
.mk-nav-chk { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mk-nav-chk:checked ~ .mk-mobile-menu { display: flex; }
.mk-nav-chk:focus-visible ~ .mk-nav-inner .mk-nav-toggle {
  outline: 2px solid var(--purple-2); outline-offset: 2px; border-radius: 8px;
}
.mk-mobile-menu a { padding: 12px 6px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.mk-mobile-menu a:last-child { border-bottom: 0; color: var(--purple-2); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 13px; cursor: pointer;
  font-weight: 700; font-size: 14.5px; padding: 11px 20px;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  position: relative; overflow: hidden;
}
.mk-btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 8px 26px rgba(124, 58, 237, .42), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mk-btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%);
  transform: translateX(-110%); transition: transform .55s ease;
}
.mk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mk-btn-primary:hover::after { transform: translateX(110%); }
.mk-btn-ghost {
  background: rgba(255, 255, 255, .05); color: var(--ink);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
}
.mk-btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.mk-btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 15px; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.mk-hero { padding: 150px 0 40px; position: relative; }
.mk-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
.mk-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding: 7px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line);
  margin-bottom: 22px;
}
.mk-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: ping 2.2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.mk-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 22px;
}
.mk-grad-text {
  background: var(--grad-text); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradshift 7s ease-in-out infinite alternate;
}
@keyframes gradshift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* Aquí vivían `.mk-rotor`, `.mk-rotor span` y `@keyframes rotor-in`: la maquinaria
   de la palabra que cambiaba sola en el titular de la portada. Fuera, con su JS.
   `.mk-grad-text` (arriba) NO es del rotor y se queda: lo usan 29 páginas 92
   veces, y es el morado de la segunda línea del titular nuevo. */
.mk-hero-sub { color: var(--muted); font-size: 17px; max-width: 460px; margin: 0 0 30px; }
.mk-hero-sub strong { color: var(--ink-2); font-weight: 600; }
.mk-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.mk-cta-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
.mk-cta-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mk-cta-trust svg { width: 16px; height: 16px; color: var(--green); }

/* La demo del producto: ventana clara flotando sobre el cielo oscuro */
.mk-hero-stage { position: relative; perspective: 1200px; }
.hero-card {
  transform-style: preserve-3d;
  animation: float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* EL BUHO DEL HERO. Esta regla llevaba meses SIN QUE NADIE LA USARA: venia del tema
   oscuro, se quito su marcado al llegar la marca clara y ella se quedo. Se reescribe en
   su sitio, con sus valores nuevos, en vez de anadir una segunda clase para lo mismo.

   NACE ESCONDIDO Y SOLO SE ENSENA A PARTIR DE 1280. Medido: la tarjeta del hero deja 180
   px de margen a 1440 y 100 a 1280, pero por debajo de unos 1128 pasa a ocupar todo el
   ancho util y el margen se queda en 24 px fijos. Con un desplazamiento de -60, el buho
   se saldria del viewport y, por ir en position absolute, ensancharia el documento
   entero: el mismo fallo del resplandor, otra vez tapado por el overflow-x hidden del
   body, o sea invisible en una captura. El corte va en UN solo sitio a proposito.

   Y LA SOMBRA ES CLARA, no la del cierre: aquella esta calibrada para el negro #101014
   de la caja del CTA y aqui el fondo es el papel calido #fbfaf7. */
.mk-hero-owl-abs { display: none; }
@media (min-width: 1280px) {
  .mk-hero-owl-abs {
    display: block;
    /* 110 Y NO 150, Y ES UNA MEDIDA, NO UN GUSTO. Con 150 el buho se solapaba 90 px
       con la tarjeta y se plantaba encima del boton «Conectar canal»: dentro de la
       interfaz, que era justo lo que no podia pasar. Con 110, y llevado al maximo que
       da el hueco —left -92 deja 8 px al borde del viewport a 1280, bottom -75 deja 9
       px de aire a la marquesina—, el solape baja a 18 x 35 y se lee como una mascota
       asomada a la esquina. */
    position: absolute; left: -92px; bottom: -75px; width: 110px; z-index: 3;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 18px 28px rgba(16, 16, 20, .18));
  }
}
/* NADA DE SANGRADO LATERAL: el resplandor es decorativo y a 1024 px medía 1052 en una
   ventana de 987 — 32 px fuera por la derecha. Va en `position:absolute`, así que el
   `overflow` de su contenedor no lo recorta: se escapa y ensancha el documento entero.

   LO QUE **NO** ERA, y llegué a escribir aquí que sí: NO movía la página de lado. El `body`
   lleva `overflow-x: hidden` y `html` no declara `overflow`, así que ese valor se propaga al
   viewport y recorta el desbordamiento. Comprobado con un control positivo: metiendo a
   posta un elemento 200 px más ancho que la ventana, `scrollX` se queda en 0. Yo había
   mirado `scrollWidth > clientWidth`, que dice que HAY algo fuera pero no que se pueda
   llegar a ello. Un síntoma que nadie sufre no es un fallo.

   POR QUÉ SE QUITA IGUAL: eran 32 px de caja recortada, y además transparente —el gradiente
   se apaga al 70 % del radio, mucho antes del borde—, o sea que no se veían ni se podían
   ver; sólo servían para ensanchar el documento y despistar a quien mida. Se quita el -6 % y
   se agranda el radio en la misma proporción (60 % de un ancho un 12 % mayor = 67 % del de
   ahora), así el halo se ve exactamente igual de grande. Arriba y abajo puede seguir
   sobresaliendo: eso no ensancha nada. */
.mk-hero-glow {
  position: absolute; inset: -8% 0; z-index: -1; border-radius: 40px;
  background: radial-gradient(67% 60% at 50% 45%, rgba(124, 58, 237, .38), transparent 70%);
  filter: blur(30px);
}

/* ── Panel de Cuho (mockup del producto, dentro del bento) ─────────────────── */
.mk-panel-wrap { grid-column: 1 / -1; }
.mk-pnl {
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #17122e, #100b20);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 80px rgba(10, 5, 25, .55);
}
.mk-pnl-top {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
}
.mk-pnl-top .brand { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; color: var(--ink); }
.mk-pnl-top .brand img { width: 20px; height: 20px; border-radius: 5px; }
.mk-pnl-top .brand b { color: var(--purple-2); }
.mk-pnl-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #34d399; }
.mk-pnl-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.mk-pnl-body { display: grid; grid-template-columns: 188px 1fr 264px; }
.mk-pnl-side { padding: 14px 12px; border-right: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 2px; }
.mk-pnl-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mk-pnl-item.is-on { background: rgba(124, 58, 237, .22); color: #fff; }
.mk-pnl-item .d { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-2); flex: none; }
.mk-pnl-grp { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6f6790; margin: 11px 0 3px 10px; }
.mk-pnl-main { padding: 18px 20px; border-right: 1px solid rgba(255, 255, 255, .06); min-width: 0; }
.mk-pnl-sec-h { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.mk-pnl-sec-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 16px; }
.mk-pnl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 22px; }
.mk-pnl-step { text-align: center; }
.mk-pnl-step .ic { width: 40px; height: 40px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.mk-pnl-step .ic svg { width: 20px; height: 20px; }
.mk-pnl-step strong { display: block; font-size: 12.5px; color: var(--ink); }
.mk-pnl-step span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.mk-pnl-sec-h2 { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 12px; }
.mk-pnl-btn { font-size: 11px; font-weight: 700; color: var(--purple-2); background: rgba(124, 58, 237, .16); padding: 5px 11px; border-radius: 8px; }
.mk-pnl-chs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mk-pnl-ch { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 13px; padding: 12px 11px; }
.mk-pnl-ch .ci { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
/* El tamaño lo manda --k (ver `.lgm`), no un número de píxeles por bloque. */
.mk-pnl-ch .ci svg { width: var(--k, 45%); height: var(--k, 45%); }
.mk-pnl-ch .nm { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.mk-pnl-ch .st { font-size: 10px; color: #34d399; display: flex; align-items: center; gap: 5px; margin: 2px 0 9px; }
.mk-pnl-ch .st i { width: 5px; height: 5px; border-radius: 50%; background: #34d399; }
.mk-pnl-ch b { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-pnl-ch > span:last-child { display: block; font-size: 9.5px; color: var(--muted); }
.mk-pnl-right { padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
.mk-pnl-card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 13px; }
.mk-pnl-card-h { font-size: 12px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.mk-pnl-card-h .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.mk-pnl-metric { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 8px; padding: 6px 0; }
.mk-pnl-metric span { font-size: 11px; color: var(--ink-2); }
.mk-pnl-metric b { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-pnl-metric.big b { font-size: 21px; }
.mk-pnl-metric em { font-size: 10px; font-weight: 700; font-style: normal; }
.mk-pnl-metric em.up { color: #34d399; }
.mk-pnl-metric em.dn { color: #fb7185; }
.mk-pnl-spark { width: 100%; height: 34px; margin: 4px 0 2px; display: block; }
/* Vistas interactivas del panel (clic en la barra lateral) */
.mk-pnl-item { cursor: pointer; transition: background .12s, color .12s; }
.mk-pnl-inbox { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.mk-pnl-inrow { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.mk-pnl-inrow .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.mk-pnl-inrow .tx { flex: 1; min-width: 0; }
.mk-pnl-inrow .tx strong { display: block; font-size: 13px; color: var(--ink); }
.mk-pnl-inrow .tx span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-pnl-inrow .ch { width: 13px; height: 13px; border-radius: 5px; flex: none; }
.mk-pnl-inrow .tm { font-size: 11px; color: var(--muted); flex: none; }
.mk-pnl-ph { text-align: center; padding: 50px 20px; }
.mk-pnl-ph-ic { width: 54px; height: 54px; border-radius: 15px; background: rgba(124, 58, 237, .18); color: var(--purple-2); display: grid; place-items: center; margin: 0 auto 14px; }
.mk-pnl-ph-ic svg { width: 26px; height: 26px; }
.mk-pnl-ph strong { display: block; font-size: 17px; color: var(--ink); font-family: var(--font-display); }
.mk-pnl-ph span { display: block; font-size: 13px; color: var(--muted); margin: 6px auto 0; max-width: 320px; line-height: 1.5; }
@media (max-width: 920px) {
  .mk-pnl-body { grid-template-columns: 1fr; }
  .mk-pnl-side, .mk-pnl-right { display: none; }
  .mk-pnl-main { border-right: 0; }
  .mk-pnl-steps { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .mk-pnl-chs { grid-template-columns: repeat(2, 1fr); }
  .mk-pnl-step span { display: none; }
}

/* ── Marquesina de canales ───────────────────────────────────────────────── */
.marquee {
  margin: 58px 0 0; padding: 18px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 999px;
}
.mq-chip .ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.mq-chip .ic svg { width: var(--k, 45%); height: var(--k, 45%); }

/* ── Secciones ────────────────────────────────────────────────────────────── */
.mk-section { padding: 84px 0; position: relative; }
/* Los anclajes (#funciones, #canales, #faq) no deben quedar bajo la nav fija */
[id] { scroll-margin-top: 84px; }
.mk-section-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.mk-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--purple-2); margin-bottom: 12px;
}
.mk-section-head h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; margin: 0 0 14px;
}
.mk-section-head p { color: var(--muted); font-size: 16.5px; margin: 0; }

/* ── BENTO de funciones ──────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bcard {
  position: relative; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  padding: 26px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bcard:hover { transform: translateY(-4px); border-color: rgba(168, 85, 247, .38); box-shadow: 0 18px 48px rgba(0, 0, 0, .42), 0 0 0 1px rgba(168, 85, 247, .12); }
.bcard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(168, 85, 247, .12), transparent 70%);
  transition: opacity .3s;
}
.bcard:hover::before { opacity: 1; }
.bcard-ic {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  margin-bottom: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.bcard-ic svg { width: 21px; height: 21px; }
.bcard h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; }
.bcard p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }
.bcard .new {
  position: absolute; top: 18px; right: 18px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: #0b0618;
  background: linear-gradient(120deg, #60a5fa, #93c5fd); padding: 4px 10px; border-radius: 999px;
}
.b-4 { grid-column: span 4; }
.b-5 { grid-column: span 5; }
.b-6 { grid-column: span 6; }
.b-7 { grid-column: span 7; }
.b-12 { grid-column: span 12; }

/* Flujo interactivo (tarjeta grande del bento) */
.mk-flow-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.mk-flow-head .ttl { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.mk-flow-head .badge {
  font-size: 10.5px; font-weight: 800; color: var(--green);
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .25);
  padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
}
.mk-flow-head .badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block; }
.mk-flow-head .sp { margin-left: auto; display: flex; gap: 8px; }
.mk-flow-head .b1 {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.mk-flow-head .b1:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.mk-flow-head .b1 svg { width: 12px; height: 12px; }
.mk-flow-canvas { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; }
.mk-fnode {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, .045); border: 1.5px solid var(--line);
  border-radius: 13px; padding: 11px 14px; width: 250px; cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.mk-fnode:hover { border-color: rgba(168, 85, 247, .4); background: rgba(255, 255, 255, .07); }
.mk-fnode.is-on { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139, 92, 246, .16); }
.mk-fnode.pulse { animation: mk-pulse .55s ease; }
@keyframes mk-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 10px 28px rgba(139, 92, 246, .45); } 100% { transform: scale(1); } }
.mk-fnode-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.mk-fnode-ic svg { width: 16px; height: 16px; }
.mk-fnode strong { font-size: 13px; display: block; }
.mk-fnode span { font-size: 10.5px; color: var(--muted); }
.mk-fline { width: 2px; height: 18px; background: linear-gradient(180deg, rgba(168, 85, 247, .6), rgba(99, 102, 241, .35)); }
.mk-fsplit, .mk-fmerge { position: relative; width: 100%; max-width: 320px; height: 22px; }
.mk-fsplit::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 11px; background: rgba(168, 85, 247, .5); transform: translateX(-1px); }
.mk-fsplit::after { content: ''; position: absolute; left: 22%; right: 22%; top: 11px; height: 2px; background: rgba(148, 130, 220, .35); }
.mk-fsplit .dl, .mk-fsplit .dr { position: absolute; top: 11px; width: 2px; height: 11px; }
.mk-fsplit .dl { left: 22%; background: rgba(52, 211, 153, .7); }
.mk-fsplit .dr { right: 22%; background: rgba(251, 191, 36, .7); }
.mk-fmerge::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 2px; height: 11px; background: rgba(148, 130, 220, .4); transform: translateX(-1px); }
.mk-fmerge::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 11px; height: 2px; background: rgba(148, 130, 220, .35); }
.mk-fmerge .ul, .mk-fmerge .ur { position: absolute; bottom: 11px; width: 2px; height: 11px; }
.mk-fmerge .ul { left: 22%; background: rgba(52, 211, 153, .7); }
.mk-fmerge .ur { right: 22%; background: rgba(251, 191, 36, .7); }
.mk-fbranch { display: flex; justify-content: center; gap: 24px; width: 100%; max-width: 320px; }
.mk-fbranch .mk-fnode { flex: 1; width: auto; min-width: 0; }

/* Actividad en vivo */
.mk-act-card {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: 13px;
  padding: 14px; margin-bottom: 12px; background: rgba(255, 255, 255, .03);
}
.mk-act-card:last-of-type { margin-bottom: 0; }
.mk-act-card .top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.mk-act-ic { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.mk-act-ic svg { width: 14px; height: 14px; }
.mk-act-card strong { font-size: 13px; }
.mk-act-card p { font-size: 11.5px; color: var(--muted); margin: 0 0 9px; line-height: 1.5; }
.mk-act-card .mt { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.mk-act-card .mt b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Cómo funciona (3 pasos) ─────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.step {
  position: relative; padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .25s, border-color .25s;
}
.step:hover { transform: translateY(-4px); border-color: rgba(168, 85, 247, .35); }
.step .n {
  font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 14px;
}
.step h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
.mk-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  padding: 34px 26px;
}
.mk-stat { text-align: center; }
.mk-stat b {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -.02em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.mk-stat span { color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* ── Canales ──────────────────────────────────────────────────────────────── */
.mk-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk-channel {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px; font-weight: 700; font-size: 15px;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.mk-channel:hover { transform: translateY(-4px); border-color: var(--ch, rgba(168, 85, 247, .4)); box-shadow: 0 14px 36px rgba(0, 0, 0, .4); }
.mk-channel-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.mk-channel-ic svg { width: var(--k, 45%); height: var(--k, 45%); }
.mk-channel small { display: block; font-weight: 600; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mk-channel .nu {
  position: absolute; top: -9px; right: 12px;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #0b0618; background: linear-gradient(120deg, #60a5fa, #93c5fd); padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(79, 125, 249, .32);
}

/* Tarjetas de canal clicables: chevron + pista de interacción */
.mk-channel[data-modal] { cursor: pointer; }
.mk-channel .go { margin-left: auto; color: var(--muted); flex: none; transition: transform .2s, color .2s; }
.mk-channel .go svg { width: 16px; height: 16px; display: block; }
.mk-channel:hover .go { transform: translateX(3px); color: var(--purple-2); }

/* Aquí vivían las 27 reglas del pop-up «qué ofrece este canal». Se borran con su
   JavaScript: el marcado de ese pop-up se quitó de la portada el 2026-08-15 y
   estas reglas llevaban un mes vistiendo a un muerto. El texto que enseñaba está
   guardado en `docs/channel-copy-legacy.md`. */

/* ── Testimonios ──────────────────────────────────────────────────────────── */
.mk-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-testi {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  transition: transform .25s, border-color .25s;
}
.mk-testi:hover { transform: translateY(-4px); border-color: rgba(168, 85, 247, .3); }
.mk-stars { display: flex; gap: 3px; color: var(--amber); margin-bottom: 14px; }
.mk-stars svg { width: 15px; height: 15px; }
.mk-testi p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 18px; line-height: 1.65; }
.mk-testi-who { display: flex; align-items: center; gap: 11px; }
.mk-testi-av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 15px;
}
.mk-testi-who strong { display: block; font-size: 13.5px; }
.mk-testi-who span { font-size: 12px; color: var(--muted); }

/* ── CTA final ────────────────────────────────────────────────────────────── */
.mk-cta {
  position: relative; border-radius: 28px; padding: 54px 50px; overflow: hidden;
  background:
    radial-gradient(720px 360px at 18% 0%, rgba(168, 85, 247, .3), transparent 65%),
    radial-gradient(620px 320px at 92% 110%, rgba(99, 102, 241, .28), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(168, 85, 247, .25);
}
.mk-cta-grid { display: grid; grid-template-columns: 1.5fr .5fr; gap: 30px; align-items: center; }
.mk-cta h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; }
.mk-cta p { color: var(--muted); font-size: 16px; margin: 0 0 26px; max-width: 520px; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.mk-footer { border-top: 1px solid var(--line); padding: 56px 0 30px; background: rgba(5, 2, 12, .6); }
/* Cinco columnas de enlaces (Producto · Soluciones · Aprende · Empresa ·
   Legal) más la de la marca, que es la primera y va más ancha. */
.mk-footer-grid { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 24px; margin-bottom: 38px; }
.mk-footer-about { color: var(--muted); font-size: 14px; margin: 14px 0 18px; max-width: 260px; }
.mk-foot-col h5 { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 14px; }
.mk-foot-col a { display: block; color: var(--muted); font-size: 14px; padding: 5px 0; transition: color .15s; }
.mk-foot-col a:hover { color: var(--purple-2); }
.mk-foot-social { display: flex; gap: 10px; }
.mk-foot-social a {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--ink-2);
  transition: background .15s, color .15s, transform .15s;
}
.mk-foot-social a:hover { background: rgba(139, 92, 246, .2); color: #fff; transform: translateY(-2px); }
.mk-foot-social svg { width: 16px; height: 16px; }
.mk-footer-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px;
  color: var(--muted); font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════════════
   DEMO DE BANDEJA del hero (ventana clara del producto sobre fondo oscuro)
   ════════════════════════════════════════════════════════════════════════════ */
.mk-demo {
  background: #fff; color: #0f172a;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  box-shadow: 0 40px 90px rgba(2, 0, 12, .65), 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}
.mk-demo-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #eef0f6; }
.mk-demo-dots { display: flex; gap: 6px; margin-right: 4px; }
.mk-demo-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mk-demo-dots i:nth-child(1) { background: #fda4af; }
.mk-demo-dots i:nth-child(2) { background: #fcd34d; }
.mk-demo-dots i:nth-child(3) { background: #86efac; }
.mk-demo-top .brand { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12.5px; }
.mk-demo-top .brand img { width: 20px; height: 20px; border-radius: 5px; }
.mk-demo-top .brand b { color: #7c3aed; }
.mk-demo-top .tools { margin-left: auto; display: flex; gap: 8px; color: #b7bed0; }
.mk-demo-top .tools svg { width: 15px; height: 15px; }
/* La columna de canales estaba clavada a 122px: con «Messenger» y su contador
   dentro no cabía nada y el bloque entero se veía aplastado. Ahora respira. */
.mk-demo-body { display: grid; grid-template-columns: 196px 1fr 1.1fr; height: 470px; }
.mk-demo-col { display: flex; flex-direction: column; min-height: 0; }
.mk-demo-col + .mk-demo-col { border-left: 1px solid #eef0f6; }
.mk-demo-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8c93a8; padding: 12px 12px 9px; }
.mk-ch-list { padding: 0 8px 10px; overflow-y: auto; }
.mk-ch-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s, color .15s, transform .15s; margin-bottom: 4px; }
.mk-ch-item:active { transform: scale(.98); }
.mk-ch-item:hover { background: #f5f6fb; }
.mk-ch-item.is-on { background: #f1ebfe; color: #7c3aed; }
.mk-ch-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 2px 6px rgba(15,23,42,.14); }
/* El tamaño lo manda --k (ver `.lgm`): el mismo porcentaje que en el muro y en
   la ventana de canal, así el logo se ve igual de grande en los tres sitios. */
.mk-ch-ic svg { width: var(--k, 45%); height: var(--k, 45%); display: block; }
/* Nombre + «en línea» en dos líneas: antes solo cabía el nombre a duras penas. */
.mk-ch-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mk-ch-tx small { font-size: 10.5px; font-weight: 600; color: #9aa1b4; }
.mk-ch-item.is-on .mk-ch-tx small { color: #9061e8; }
.mk-ch-item .ct { margin-left: auto; background: #eef1f8; color: #7a8298; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; flex: none; }
.mk-ch-item.is-on .ct { background: #fff; color: #7c3aed; }
/* «Conectar canal» ahora es un enlace real al registro (era un div muerto). */
.mk-ch-add { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 10px; margin: 10px 8px 0; border: 1px dashed #cfd6e6; border-radius: 11px; color: #7c3aed; font-size: 12px; font-weight: 800; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.mk-ch-add:hover { background: #f5f1ff; border-color: #a855f7; }
.mk-ch-add svg { width: 14px; height: 14px; }
.mk-tabs { display: flex; gap: 2px; padding: 0 8px 8px; }
.mk-tabs button { border: 0; background: none; font-family: inherit; font-size: 10.5px; font-weight: 700; color: #8c93a8; padding: 5px 7px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.mk-tabs button.is-on { background: linear-gradient(120deg, #7c3aed, #a855f7); color: #fff; }
.mk-conv-list { overflow-y: auto; padding: 0 6px 10px; flex: 1; }
.mk-conv { display: flex; gap: 9px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background .12s; position: relative; }
.mk-conv:hover { background: #f5f6fb; }
.mk-conv.is-on { background: #f1ebfe; }
.mk-conv-av { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex: none; overflow: hidden; background: #eef2f7; }
/* El avatar lleva un retrato dibujado: que llene el círculo entero. */
.mk-conv-av svg { width: 100%; height: 100%; display: block; }
/* Las fotos de los contactos de la demo. `cover` recorta sin deformar la cara;
   el retrato ya viene cuadrado, así que solo hace falta llenar el círculo. */
.mk-conv-av img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mk-conv-chdot { width: 15px; height: 15px; border-radius: 5px; position: absolute; left: 29px; top: 29px; border: 2px solid #fff; display: grid; place-items: center; color: #fff; }
.mk-conv-chdot svg { width: var(--k, 45%); height: var(--k, 45%); }
.mk-conv-mid { min-width: 0; flex: 1; }
.mk-conv-mid .nm { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.mk-conv-mid strong { font-size: 12px; }
.mk-conv-mid .tm { font-size: 10px; color: #8c93a8; flex: none; }
.mk-conv-mid .pv { font-size: 11px; color: #8c93a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mk-conv .unread { width: 8px; height: 8px; border-radius: 50%; background: #7c3aed; position: absolute; right: 9px; top: 14px; }
.mk-conv-empty { padding: 30px 16px; text-align: center; font-size: 11.5px; color: #8c93a8; }
.mk-chat { display: flex; flex-direction: column; min-height: 0; }
.mk-chat-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #eef0f6; }
.mk-chat-head .mk-conv-av { width: 30px; height: 30px; font-size: 11px; }
.mk-chat-head strong { font-size: 12.5px; display: block; }
.mk-chat-head .chn { font-size: 10.5px; color: #8c93a8; display: flex; align-items: center; gap: 4px; }
.mk-chat-head .chn .d { width: 12px; height: 12px; border-radius: 4px; display: grid; place-items: center; color: #fff; }
.mk-chat-head .chn .d svg { width: 8px; height: 8px; }
.mk-chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: background .3s; }
.mk-msg { max-width: 80%; padding: 8px 11px; border-radius: 12px; font-size: 12px; line-height: 1.45; }
.mk-msg.them { background: #fff; border: 1px solid rgba(0, 0, 0, .06); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.mk-msg.me { background: linear-gradient(120deg, #7c3aed, #a855f7); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.mk-msg .t { display: block; font-size: 9px; opacity: .65; margin-top: 3px; }
.mk-msg-card { background: #fff; border: 1px solid #eef0f6; border-radius: 11px; padding: 10px 12px; align-self: flex-start; max-width: 80%; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.mk-msg-card strong { font-size: 12px; display: block; }
.mk-msg-card span { font-size: 10.5px; color: #8c93a8; }
.mk-msg-card a { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: #7c3aed; }

/* ── UNA ACCIÓN DE CUHO DENTRO DE LA CONVERSACIÓN ────────────────────────────
   No es un mensaje: es el registro de algo que Cuho ha HECHO en el negocio, y
   que no se le manda a nadie. Por eso `align-self: stretch` y no un lado — las
   burbujas se alinean a izquierda (cliente) o derecha (nosotros), y cualquiera
   de los dos lados la leería como «esto se le escribió al cliente».
   Los colores base son los del modo OSCURO de la demo, que sigue vivo más abajo
   en esta misma hoja: si alguien vuelve a encenderlo, esto no se queda ilegible.
   La marca clara los pisa en site-brand.css. Y nada de verdes enormes: es un
   registro, no una celebración. */
.mk-msg-action {
  align-self: stretch; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin: 2px 0;
  border: 1px solid rgba(34, 197, 94, .24); border-radius: 10px;
  background: rgba(34, 197, 94, .08); color: #bbf7d0;
}
.mk-msg-action-ic {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: rgba(34, 197, 94, .16);
  color: #4ade80; font-size: 12px; font-weight: 900;
}
.mk-msg-action-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-msg-action-copy strong { font-size: 11.5px; line-height: 1.35; }
.mk-msg-action-copy span { font-size: 10.5px; line-height: 1.35; color: #86efac; }
.mk-chat-input { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid #eef0f6; background: #fff; }
.mk-chat-input .box { flex: 1; background: #f2f4f9; border-radius: 9px; padding: 8px 11px; font-size: 11.5px; color: #9aa3b5; }
.mk-chat-input .snd { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(120deg, #7c3aed, #a855f7); display: grid; place-items: center; color: #fff; flex: none; }
.mk-chat-input .snd svg { width: 15px; height: 15px; }

/* ── Demo del hero en OSCURO (look de la app, imagen 2) ─────────────────────
   Override sobre los estilos claros de arriba. !important en los fondos para
   ganar al background inline que el JS pone en .mk-chat-msgs por canal. */
.mk-demo { background: linear-gradient(180deg, #181230, #0f0a20) !important; }
.mk-demo-top { border-bottom-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .015); }
.mk-demo-top .brand b { color: #a78bfa; }
.mk-demo-top .tools { color: #6f6790; }
.mk-demo-col + .mk-demo-col { border-left-color: rgba(255, 255, 255, .06); }
.mk-demo-h { color: #6f6790; }
.mk-ch-item { color: #c9c2e4; }
.mk-ch-item:hover { background: rgba(255, 255, 255, .05); }
.mk-ch-item.is-on { background: rgba(124, 58, 237, .24); color: #fff; }
.mk-ch-item .ct { background: rgba(255, 255, 255, .08); color: #b9b2d8; }
.mk-ch-item.is-on .ct { background: rgba(255, 255, 255, .2); color: #fff; }
.mk-ch-add { border-color: rgba(255, 255, 255, .14); color: #8b84a8; }
.mk-tabs button { color: #8b84a8; }
.mk-conv:hover { background: rgba(255, 255, 255, .04); }
.mk-conv.is-on { background: rgba(124, 58, 237, .18); }
.mk-conv-mid strong { color: #f5f2ff; }
.mk-conv-mid .tm, .mk-conv-mid .pv { color: #8b84a8; }
.mk-conv-chdot { border-color: #14102a; }
.mk-conv-empty { color: #8b84a8; }
.mk-chat-head { border-bottom-color: rgba(255, 255, 255, .07); }
.mk-chat-head strong { color: #f5f2ff; }
.mk-chat-head .chn { color: #8b84a8; }
.mk-chat-msgs { background: #0f0a1e !important; }
.mk-msg.them { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .07); color: #e9e5f7; box-shadow: none; }
.mk-msg-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.mk-msg-card strong { color: #f5f2ff; }
.mk-msg-card span { color: #8b84a8; }
.mk-msg-card a { color: #a78bfa; }
.mk-chat-input { background: rgba(255, 255, 255, .02); border-top-color: rgba(255, 255, 255, .07); }
.mk-chat-input .box { background: rgba(255, 255, 255, .05); color: #8b84a8; }

/* ════════════════════════════════════════════════════════════════════════════
   PRECIOS
   ════════════════════════════════════════════════════════════════════════════ */
.mk-toggle {
  display: inline-flex; gap: 4px; padding: 5px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 14px;
  margin: 6px auto 40px;
}
.mk-toggle button {
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
  font-weight: 700; font-size: 14px; padding: 9px 20px; border-radius: 10px;
  transition: background .2s, color .2s;
}
.mk-toggle button.is-on { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(124, 58, 237, .4); }
.mk-toggle .save { color: var(--green); font-weight: 800; font-size: 12px; margin-left: 5px; }

/* 4 columnas: los 4 planes reales del alta (Gratis/Básico/Pro/Premium). */
.mk-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
/* Aviso honesto bajo los planes: qué se aplica de verdad y qué no. */
.mk-plan-nota {
  max-width: 780px; margin: 26px auto 0; text-align: center;
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px;
}
.mk-plan-nota b { color: var(--ink); }
@media (max-width: 1100px) { .mk-plans { grid-template-columns: repeat(2, 1fr); } }
.mk-plan {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line); border-radius: 24px; padding: 30px 28px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.mk-plan:hover { transform: translateY(-5px); border-color: rgba(168, 85, 247, .3); }
.mk-plan--pop {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(23, 12, 48, .92), rgba(13, 7, 28, .94)) padding-box,
    linear-gradient(140deg, #a855f7, #6366f1 60%, #4f7df9) border-box;
  box-shadow: 0 26px 70px rgba(124, 58, 237, .35);
  transform: scale(1.03);
}
.mk-plan--pop:hover { transform: scale(1.03) translateY(-5px); }
.mk-plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 5px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .5);
}
.mk-plan h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.mk-plan-desc { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; min-height: 38px; }
.mk-plan-price { display: flex; align-items: baseline; gap: 5px; }
.mk-plan-price b { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -.03em; }
.mk-plan-price span { color: var(--muted); font-weight: 600; }
.mk-plan-cycle { color: var(--muted); font-size: 12.5px; margin: 4px 0 20px; min-height: 18px; }
.mk-plan .mk-btn { width: 100%; }
.mk-plan-feats { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 11px; }
.mk-plan-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.mk-plan-feats li strong { color: var(--ink); }
.mk-plan-feats .ck {
  width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; flex: none; margin-top: 1px;
  background: rgba(52, 211, 153, .15); color: var(--green);
}
.mk-plan-feats .ck svg { width: 11px; height: 11px; }
.mk-plan-feats li.off { color: var(--muted); opacity: .6; }
.mk-plan-feats li.off .ck { background: rgba(255, 255, 255, .07); color: var(--muted); }

/* Comparativa */
.mk-compare-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
}
.mk-compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.mk-compare th, .mk-compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.mk-compare th { font-family: var(--font-display); font-weight: 800; font-size: 14.5px; }
.mk-compare td:first-child, .mk-compare th:first-child { text-align: left; color: var(--ink-2); font-weight: 600; }
.mk-compare tr:last-child td { border-bottom: 0; }
.mk-compare .col-pop { background: rgba(139, 92, 246, .1); color: #fff; font-weight: 700; }
.mk-compare th.col-pop { color: var(--purple-2); }
.mk-compare .yes, .mk-compare .no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; }
.mk-compare .yes { background: rgba(52, 211, 153, .15); color: var(--green); }
.mk-compare .no { background: rgba(255, 255, 255, .07); color: var(--muted); }
.mk-compare .yes svg, .mk-compare .no svg { width: 11px; height: 11px; }

/* FAQ */
.mk-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mk-faq-item {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  transition: border-color .25s;
}
.mk-faq-item.open { border-color: rgba(168, 85, 247, .35); }
.mk-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink);
  padding: 18px 22px;
}
.mk-faq-q svg { width: 17px; height: 17px; flex: none; color: var(--purple-2); transition: transform .3s; }
.mk-faq-item.open .mk-faq-q svg { transform: rotate(45deg); }
.mk-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mk-faq-a p { color: var(--muted); font-size: 14.5px; margin: 0; padding: 0 22px 20px; line-height: 1.65; }

/* ════════════════════════════════════════════════════════════════════════════
   AUTENTICACIÓN (login / register) — mismo sistema oscuro que la landing
   ════════════════════════════════════════════════════════════════════════════ */
.au-main {
  display: grid; grid-template-columns: 1fr 460px; gap: 56px;
  align-items: start; padding: 130px 24px 70px;
  max-width: var(--wrap); margin: 0 auto;
}
.au-left { padding-top: 26px; position: relative; }
.au-left h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(34px, 3.8vw, 48px); line-height: 1.08; margin: 0 0 16px;
}
.au-left > p { color: var(--muted); font-size: 16px; max-width: 420px; margin: 0 0 28px; }
.au-points { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 16px; }
.au-points li { display: flex; gap: 13px; align-items: flex-start; }
.au-points .ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: var(--purple-2);
  background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .25);
}
.au-points .ic svg { width: 18px; height: 18px; }
.au-points strong { display: block; font-size: 14.5px; }
.au-points span { color: var(--muted); font-size: 13px; line-height: 1.5; }

.au-card {
  position: relative;
  background:
    radial-gradient(420px 200px at 85% -8%, rgba(124, 58, 237, .18), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid rgba(168, 85, 247, .25); border-radius: 24px;
  padding: 30px 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.au-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 0 0 4px; }
.au-card .lead { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; }
.au-error {
  background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .35);
  color: #fca5a5; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px;
}
/* ── NO TODO LO QUE SE DICE AHÍ ES UN ERROR ──────────────────────────────
   La misma caja roja servía para «la contraseña no es correcta» y para «el
   restablecimiento automático todavía no está disponible, escríbenos». La
   segunda no es un fallo de la persona: es una AYUDA, y pintarla de rojo le
   dice que ha hecho algo mal justo cuando ya está perdida. Rojo para lo que
   ha salido mal; azul para lo que sólo se está contando. */
/* ── Y ESE AZUL NO SE LEÍA ───────────────────────────────────────────────
   Escribí `#93c5fd`, que es un azul CLARO: el de este fichero, pensado para
   fondo oscuro. Pero las 32 páginas cargan `site-brand.css` encima y pintan
   claro, y aquí no manda el orden sino la ESPECIFICIDAD: `.au-error.es-aviso`
   son dos clases y gana al `.au-error { color: #b3261e }` del tema nuevo. O
   sea que el color oscuro se quedaba fuera y el aviso salía en azul claro
   sobre azul clarísimo.
   Medido: 1.57 a 1. La WCAG pide 4.5 para texto normal — es prácticamente
   invisible. Y es el ÚNICO texto que le explica a alguien por qué se le ha
   echado de la pantalla de crear la cuenta.
   Esta casa ya tenía la ley escrita: «un color y su fondo son del mismo
   tema». La escribí yo y la rompí yo. Ahora el azul es oscuro, del tema que
   de verdad se sirve: 8.4 a 1 sobre el fondo compuesto. */
.au-error.es-aviso {
  background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .35);
  color: #1c3f94;
}
.au-field { margin-bottom: 14px; }
.au-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.au-field label .hint { color: var(--muted); font-weight: 500; }
.au-input-wrap { position: relative; }
.au-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
  border-radius: 12px; color: var(--ink); font-family: inherit; font-size: 14.5px;
  padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.au-input::placeholder { color: #6f6794; }
/* ── «Te falta este campo» en el registro y el acceso ──────────────────────
   El mismo aviso que dentro de la herramienta. El rojo es el MISMO #dc2626 del
   panel porque la tarjeta de registro va sobre BLANCO: con el rojo claro de
   .au-error el contraste medido en Chrome se quedaba en 1,9:1 —ilegible—, y
   con este sube a 4,8:1. El motivo se escribe debajo del campo para que se
   entienda sin depender del color. */
.au-field.fld-missing label,
.au-terms.fld-missing > span { color: #dc2626 !important; }
.au-field.fld-missing .au-input,
.au-terms.fld-missing input[type="checkbox"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
.au-field .fld-err,
.au-terms .fld-err {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #dc2626;
}
.au-field .fld-err::before,
.au-terms .fld-err::before {
  content: '!';
  display: inline-block;
  width: 13px; height: 13px; margin-right: 5px;
  border-radius: 50%;
  background: #dc2626; color: #fff;
  font-size: 9px; font-weight: 800; line-height: 13px; text-align: center;
  vertical-align: 1px;
}
.au-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(139, 92, 246, .16); background: rgba(255, 255, 255, .07); }
.au-pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--muted); display: grid; place-items: center;
}
.au-pw-toggle:hover { color: var(--ink-2); background: rgba(255, 255, 255, .06); }
.au-pw-toggle svg { width: 17px; height: 17px; }
/* ── DOS COSAS QUE NO CABEN AL LADO NO VAN AL LADO ───────────────────────
   «Mantener la sesión iniciada» y «¿Olvidaste tu contraseña?» compartían fila
   con `space-between`. En un teléfono no caben: las dos parten en dos líneas y
   quedan encajonadas una contra otra, y el enlace —que es un destino -- pierde
   su zona de pulsación. Se dejan envolver: en ancho sobra sitio y siguen en
   una fila; cuando no cabe, cada una en la suya. */
.au-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 2px 0 18px; font-size: 13px; }
.au-meta .au-linkbtn { padding: 4px 0; }
.au-meta a { color: var(--purple-2); font-weight: 600; }
.au-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--purple-2); font-weight: 600; cursor: pointer; }
.au-linkbtn:hover { text-decoration: underline; }
.au-check { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; cursor: pointer; }
.au-check input { accent-color: var(--purple); width: 15px; height: 15px; }
/* ── LO OBLIGATORIO NO PUEDE PESAR MENOS QUE LO OPCIONAL ─────────────────
   Estas dos casillas eran `font-size: 13px` con 4 px de aire encima, metidas
   entre el campo de contraseña y el botón negro: se leían como dos notas al
   pie. Y son obligatorias de verdad —el servidor no crea la cuenta sin
   ellas— mientras que el teléfono, que es opcional, ocupa una fila entera
   con su etiqueta. La jerarquía decía lo contrario de lo que hace el código.
   No se convierten en un banner legal: se les da aire alrededor, separación
   entre ellas y un área de pulsación que se pueda acertar con el pulgar. */
.au-terms { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 0 0 10px; cursor: pointer; padding: 6px 0; }
.au-terms:first-of-type { margin-top: 14px; }
.au-terms:last-of-type { margin-bottom: 20px; }
.au-terms input { accent-color: var(--purple); margin-top: 2px; width: 17px; height: 17px; flex: none; }
.au-terms a { color: var(--purple-2); font-weight: 700; }
.mk-btn-block { width: 100%; }
.au-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; margin: 20px 0 14px; }
.au-divider::before, .au-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.au-oauth { display: flex; flex-direction: column; gap: 10px; }
.au-oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2);
  border-radius: 12px; color: var(--ink); font-family: inherit; font-weight: 700; font-size: 14px;
  padding: 11px 16px; cursor: pointer; transition: background .15s, border-color .15s;
}
.au-oauth-btn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .25); }
.au-oauth-btn svg { width: 17px; height: 17px; }
.au-fine { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-top: 18px; }
.au-fine svg { width: 14px; height: 14px; flex: none; color: var(--green); }
/* La línea de confianza del pie: existe, no grita, y no compite con el aviso
   de la invitación —que sí es accionable— por el mismo peso visual. */
.au-pie-confianza { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 14px 0 0; opacity: .8; }
.au-alt { text-align: center; color: var(--muted); font-size: 13.5px; margin: 16px 0 0; }
.au-alt a { color: var(--purple-2); font-weight: 700; }

@media (max-width: 980px) {
  .au-main { grid-template-columns: 1fr; gap: 36px; padding-top: 104px; }
  /* ── EN UN TELÉFONO, PRIMERO EL FORMULARIO ────────────────────────────
     La rejilla pasaba a una columna y nadie reordenaba, así que en el móvil
     el formulario caía DEBAJO del «Bienvenido de nuevo» y de los tres
     beneficios: para entrar —que es a lo que se viene— había que pasar por
     el argumento de venta entero. Quien ya es cliente no necesita que le
     convenzan otra vez.
     Se hace con `order` y NO tocando el orden del HTML, para que el
     escritorio quede exactamente igual: ahí las dos columnas se ven a la vez
     y el texto a la izquierda está bien donde está. Quien siga bajando en el
     móvil se encuentra el argumento después, que es su sitio. */
  .au-card { max-width: 520px; margin-inline: auto; order: -1; }
  .au-left { order: 1; }
}

/* ── EL BOTÓN DE ENTRAR NO PUEDE QUEDAR BAJO LA LÍNEA DE FLOTACIÓN ───────

   Medido en un visor de 1280x529 —un portátil con la ventana como la tiene

   cualquiera, no un caso raro—: la tarjeta empieza en y=130 y «Entrar» acaba

   en y=574. SE SALE 45 px. Para pulsar el botón principal de una pantalla que

   sólo tiene dos campos hay que rodar la página, y en un monitor grande este

   fallo no se ve nunca.

   Se recuperan 60 px, de donde sobran: 34 del aire que hay sobre la tarjeta

   (la barra mide 67, así que quedan 29 de respiro), 8 de su relleno y 18 de

   tres huecos interiores. NI `transform: scale()`, NI campos más bajos, NI

   letra más pequeña: eso no es compactar, es empeorar la pantalla y que desde

   fuera parezca arreglada.

   POR ALTURA, no por ancho: lo que falta es sitio vertical. Y sólo en

   escritorio, porque por debajo de 980 la tarjeta ya sube al primer lugar

   —el bloque de aquí justo encima— y el botón se ve sin rodar.

   Y sólo en el acceso: el alta tiene cinco campos y dos casillas, y ahí rodar

   es lo natural. Meterla a la fuerza en 529 px la haría peor.
   980,02 Y NO 981. El bloque de arriba cubre hasta 980 INCLUIDO, así que su
   complemento empieza justo después, no en el entero siguiente: con 981 se
   quedaba fuera la franja de 980 a 981, que existe de verdad —el zoom del
   navegador da anchos fraccionarios— y ahí salía la maqueta de dos columnas
   SIN compactar, que es exactamente el caso que esto viene a arreglar.
   980,02 está por encima del paso mínimo que usan los navegadores (1/64 de
   px) y por debajo de cualquier ancho real.
   Y VA AQUÍ, pegado a su otra mitad y no al final del fichero: lo dice la
   ley escrita unas líneas más abajo, en este mismo sitio, y la escribí sin
   aplicarla. */

@media (min-width: 980.02px) and (max-height: 600px) {

  body.es-acceso .au-main { padding-top: 96px; }

  body.es-acceso .au-card { padding-top: 22px; }

  body.es-acceso .au-card .lg-tabs { margin-bottom: 12px; }

  body.es-acceso .au-card .lead { margin-bottom: 14px; }

  body.es-acceso .au-card .au-meta { margin-bottom: 12px; }

}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* El orden IMPORTA: estos bloques van de mayor a menor y todos pesan lo mismo,
   así que gana el último que case. Un corte nuevo se mete en su sitio por
   tamaño, nunca al final del fichero. */
@media (max-width: 1150px) {
  /* Seis columnas de pie no caben por debajo del ancho de `--wrap`. */
  .mk-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}
/* El corte del megamenú NO puede ir aquí: `.mk-nav-drop-menu--mega` se define
   más abajo con el mismo peso, y a igualdad de peso gana la última regla del
   fichero, no la de la consulta de medios. Estaba escrito aquí y no hacía
   nada: a 985 px seguían saliendo las cuatro columnas. Vive al final, justo
   detrás del bloque del megamenú. */
@media (max-width: 1080px) {
  .mk-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .mk-hero { padding-top: 120px; }
  .mk-hero-sub { max-width: 560px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .b-4, .b-5 { grid-column: span 3; }
  .b-6, .b-7, .b-12 { grid-column: span 6; }
  .mk-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 880px) {
  .mk-nav-links, .mk-nav-cta { display: none; }
  .mk-nav-toggle { display: grid; place-items: center; }
  .mk-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; padding: 28px 20px; }
  .mk-channels { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .mk-testimonials { grid-template-columns: 1fr; }
  .mk-plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .mk-plan--pop { transform: none; }
  .mk-plan--pop:hover { transform: translateY(-5px); }
  .mk-cta { padding: 40px 26px; }
  .mk-cta-grid { grid-template-columns: 1fr; text-align: center; }
  .mk-cta p { margin-left: auto; margin-right: auto; }
  /* OJO: ESTAS DOS LÍNEAS YA NO MANDAN. `site-brand.css` carga después y con la
     misma especificidad las pisa en todo el tramo ≤880: allí la maqueta pasa a
     una sola columna —la de la conversación— con el alto suelto. Se quedan aquí
     porque son el estado base de la hoja oscura, pero quien venga a cambiar la
     maqueta por debajo de 880 tiene que ir a `site-brand.css`; tocar esto no
     hará nada. La columna de 112 px era, además, el fallo: los nombres de los
     canales no caben en 112 y se cortaban a media palabra. */
  .mk-demo-body { grid-template-columns: 112px 1fr; height: 410px; }
  .mk-demo-col--chat { display: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .b-4, .b-5, .b-6, .b-7, .b-12 { grid-column: span 1; }
  .mk-section { padding: 60px 0; }
  .mk-footer-grid { grid-template-columns: 1fr 1fr; }
  .mk-hero h1 { font-size: 36px; }
  .mk-hero-cta .mk-btn { width: 100%; }
}
@media (max-width: 520px) {
  /* Igual que arriba: lo pisa `site-brand.css`. Aquí no se toca nada. */
  .mk-demo-body { grid-template-columns: 1fr; height: 380px; }
  .mk-demo-col--ch { display: none; }
  .mk-channels { grid-template-columns: 1fr; }
}

/* ── Menú desplegable de la barra («Funciones») ────────────────────────────
   SIN JavaScript: se abre con :hover y con :focus-within, así que también
   funciona con el teclado (Tab). Se hace en CSS a propósito — la política de
   seguridad del sitio no admite scripts en línea sin firma.
   El disparador es un enlace de verdad a /funciones: quien pulse, llega. */
.mk-nav-drop { position: relative; display: flex; }
/* Puente invisible entre el disparador y el panel: sin él, el hueco de 8px
   cierra el menú al mover el ratón hacia abajo. */
.mk-nav-drop::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.mk-nav-links .mk-nav-drop-t {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  padding: 9px 14px; border-radius: 10px; transition: color .15s, background .15s;
}
.mk-nav-links .mk-nav-drop-t svg { width: 13px; height: 13px; transition: transform .18s; }
.mk-nav-drop:hover .mk-nav-drop-t svg,
.mk-nav-drop:focus-within .mk-nav-drop-t svg { transform: rotate(180deg); }
.mk-nav-drop-menu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 20;
  min-width: 320px; padding: 8px;
  display: grid; gap: 2px;
  background: rgba(8, 4, 18, .97);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 28px 64px -26px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mk-nav-drop:hover .mk-nav-drop-menu,
.mk-nav-drop:focus-within .mk-nav-drop-menu { opacity: 1; visibility: visible; transform: none; }
.mk-nav-links .mk-nav-drop-menu a { display: block; padding: 9px 12px; border-radius: 11px; }
.mk-nav-links .mk-nav-drop-menu a b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.mk-nav-links .mk-nav-drop-menu a span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* ── EL MEGAMENÚ DE «PRODUCTO» (cuatro columnas) ───────────────────────────
   Es una VARIANTE del desplegable de arriba, no un menú nuevo: hereda el
   fondo, el borde, la sombra, el retardo y el modo de abrirse. Solo cambia
   cuánto mide, cómo reparte las entradas y de qué elemento cuelga.

   SIGUE SIN JAVASCRIPT: abre con :hover y con :focus-within, igual que el de
   siempre. Eso es lo que permite que «Privacidad» y «Términos» —las dos
   páginas que los revisores de Meta y de Google tienen que poder abrir sin la
   contraseña del sitio, y que por eso no cargan NINGÚN .js— lleven exactamente
   el mismo menú que el resto, con sus diecisiete enlaces. El único añadido con
   guion es cerrar con Escape (site-nav.js) y no cierra ninguna puerta: sin él
   se sale con Tab o con el ratón.

   DE QUÉ CUELGA, Y POR QUÉ: el panel mide lo que mide `.mk-wrap`, así que su
   bloque contenedor tiene que ser `.mk-nav-inner` y no el disparador —de ahí
   el `position: static` de la variante—. El puente invisible que tapa el hueco
   entre el disparador y el panel vive en `.mk-nav-drop::after`, y con `static`
   se estiraría por toda la barra tapando clics: en esta variante se apaga y el
   puente lo pone el propio panel con `::before`, que solo existe mientras el
   panel está visible. El menú sigue siendo HIJO de `.mk-nav-drop` en el HTML,
   y el `:hover` se hereda por parentesco de árbol, no por posición. */
.mk-nav-inner { position: relative; }
.mk-nav-drop--mega { position: static; }
.mk-nav-drop--mega::after { content: none; }
.mk-nav-drop-menu--mega {
  left: 0; right: 0; min-width: 0;
  padding: 20px 24px 0;
  grid-template-columns: 1.15fr 1fr .95fr 1.1fr;
  gap: 2px 24px;
  border-radius: 20px;
  max-height: calc(100vh - 96px); overflow-y: auto;
}
.mk-nav-drop-menu--mega::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mk-nav-col { display: flex; flex-direction: column; min-width: 0; }
.mk-nav-col h6 {
  margin: 2px 0 8px; padding: 0 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
/* Cada entrada: icono a la izquierda ocupando las dos filas, título arriba y
   frase debajo. Las áreas van dichas a mano para que no dependa del orden. */
.mk-nav-links .mk-nav-col a {
  display: grid; grid-template-columns: 26px 1fr; column-gap: 10px;
  grid-template-areas: 'ic ttl' 'ic dsc';
  align-items: start; padding: 8px 10px; border-radius: 12px;
}
.mk-nav-links .mk-nav-col a b { grid-area: ttl; }
.mk-nav-links .mk-nav-col a span { grid-area: dsc; }
.mk-nav-col a .ic {
  grid-area: ic; align-self: start;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
  color: var(--purple-2); transition: background .15s, color .15s;
}
.mk-nav-col a .ic svg { width: 14px; height: 14px; }
.mk-nav-links .mk-nav-col a:hover .ic { background: rgba(139, 92, 246, .26); color: #fff; }
/* Columna 1: la destacada, con el icono grande y una línea que la separa. */
.mk-nav-col--hero { padding-right: 22px; border-right: 1px solid var(--line); justify-content: start; }
.mk-nav-links .mk-nav-col--hero a { grid-template-columns: 36px 1fr; column-gap: 12px; padding: 11px 10px; }
.mk-nav-col--hero a .ic { width: 36px; height: 36px; border-radius: 11px; }
.mk-nav-col--hero a .ic svg { width: 19px; height: 19px; }
.mk-nav-links .mk-nav-col--hero a b { font-size: 14.5px; }
/* La franja del pie del panel, de lado a lado. */
.mk-nav-mega-foot {
  grid-column: 1 / -1; margin-top: 14px;
  display: flex; align-items: center; gap: 22px;
  border-top: 1px solid var(--line); padding: 14px 2px;
}
.mk-nav-mega-foot p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); max-width: 460px; }
/* El botón está dentro de `.mk-nav-links`, y esas reglas son más específicas
   que `.mk-btn`: si no se repite aquí, el enlace del menú le come el relleno,
   el color y hasta el degradado al pasar el ratón. */
.mk-nav-links .mk-nav-mega-foot .mk-btn,
.mk-nav-links .mk-nav-mega-foot .mk-btn:hover {
  padding: 10px 18px; border-radius: 12px;
  font-size: 13.5px; font-weight: 700; color: #fff; background: var(--grad);
}
.mk-nav-mega-foot .mk-btn svg { width: 15px; height: 15px; }
/* La ilustración va dibujada, no es un fichero: ver el comentario del HTML. */
.mk-nav-mega-art {
  width: 104px; height: 62px; margin-left: auto; flex: none; align-self: end;
  color: var(--purple-2); stroke: currentColor; stroke-width: 1.6; fill: none;
}
/* La chispa es la única pieza rellena; el resto es trazo. */
.mk-nav-mega-art .fill { fill: currentColor; stroke: none; }

/* ── Menú móvil: acordeón, no lista plana ──────────────────────────────────
   Con diecisiete entradas la lista de antes era un muro. El acordeón usa la
   MISMA técnica de casilla que el interruptor del menú de las legales: CSS
   puro, así que vale igual en las dieciséis páginas y no depende de ningún
   guion. Nada de :hover aquí: en un dedo no existe. */
.mk-mm-chk { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mk-mobile-menu .mk-mm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 6px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.mk-mobile-menu .mk-mm-head svg { width: 15px; height: 15px; flex: none; transition: transform .18s; }
.mk-mm-chk:checked ~ .mk-mm-head svg { transform: rotate(180deg); }
.mk-mm-chk:focus-visible ~ .mk-mm-head { outline: 2px solid var(--purple-2); outline-offset: 2px; border-radius: 8px; }
.mk-mm-panel { display: none; }
.mk-mm-chk:checked ~ .mk-mm-panel { display: block; }
.mk-mm-panel h6 {
  margin: 14px 0 2px; padding: 0 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
/* `display: block` NO sobra: los enlaces sueltos del menú son hijos directos
   de un contenedor flex en columna y se apilan solos, pero los del acordeón
   cuelgan de `.mk-mm-panel`, que es un bloque normal. Sin esto se quedan
   `inline` y salen de dos en dos por línea, como un párrafo de enlaces
   (medido: «Explora Cuho» y «Cómo funciona Cuho» compartían fila).
   Y el `:last-child` de la lista pinta el último enlace en morado («Únete
   gratis»); dentro del acordeón ese último enlace es otro, así que aquí se
   devuelve al color de los demás. */
.mk-mobile-menu .mk-mm-panel a,
.mk-mobile-menu .mk-mm-panel a:last-child {
  display: block; padding-left: 20px; font-size: 14px; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

/* Corte del megamenú para portátiles pequeños (de 881 a 1150 px; por debajo
   de 880 manda el acordeón). Va AQUÍ, detrás del bloque de arriba, porque a
   igualdad de peso gana la última regla y una consulta de medios no rompe ese
   empate. Puesto entre los demás cortes no hacía nada. */
@media (max-width: 1150px) {
  .mk-nav-drop-menu--mega { grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .mk-nav-col--hero { border-right: 0; padding-right: 0; }
  .mk-nav-mega-art { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ACCESO: LAS DOS PESTAÑAS DEL LOGIN (propietario / equipo)
   Añadido para /login. Vive AQUÍ porque site.css es la única hoja que carga
   esa página además de site-brand.css.

   QUÉ HACEN Y QUÉ NO: el formulario es EL MISMO y el destino es EL MISMO
   (POST /auth/login). Lo que cambian estas pestañas es el texto de alrededor:
   la ayuda de la tarjeta, la lista de la izquierda, el aviso sobre el acceso
   con Google y el pie («crear cuenta» frente a «abre tu enlace de invitación»).
   Si algún día alguien intenta convertirlas en dos accesos distintos, no: eso
   sería un botón que finge, y aquí no se hace.

   Nacen OCULTAS con [hidden] y las enseña login-acceso.js: sin JavaScript se
   ven los dos textos, que es más largo pero no esconde nada.
   ════════════════════════════════════════════════════════════════════════════ */
.lg-tabs {
  display: flex; gap: 6px; margin: 0 0 18px;
  background: var(--panel-2, #f6f5fb); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
}
.lg-tabs[hidden] { display: none; }
.lg-tab {
  flex: 1 1 0; min-width: 0;
  border: 0; border-radius: 999px; padding: 9px 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--muted); background: transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.lg-tab:hover { color: var(--ink-2); }
.lg-tab.is-on {
  background: #fff; color: var(--ink);
  box-shadow: 0 6px 16px -10px rgba(22, 24, 29, .45);
}
.lg-tab:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Los cuatro papeles REALES de Cuho. No hay un quinto: propietario,
   administrador, gestor y agente. El que lleva una tienda es el GESTOR — se
   llamó «encargado» hasta el 2026-08-15. */
.lg-roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.lg-roles .pd-chip { font-size: 12px; padding: 6px 12px; }

/* El aviso de la primera vez. Es una caja, no un botón: no lleva a ningún
   sitio porque el enlace de invitación lo tiene quien lleva el negocio. */
.lg-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f6f5fb; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin: 16px 0 0;
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.lg-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--purple); }
.lg-note b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 2px; }

/* Ocultar de verdad: [hidden] es una regla del navegador y la pierde cualquier
   `display` escrito por nosotros (.mk-pill es inline-flex, .au-points es flex).
   Sin esto, la pestaña que no toca se quedaría a la vista. */
[data-acceso][hidden] { display: none !important; }

/* ── Y LA MISMA LEY, OTRA VEZ, PORQUE ME LA VOLVÍ A SALTAR ───────────────
   Leí el comentario de aquí arriba el mismo día que puse `hidden` sobre un
   `.au-terms` —que es `display:flex`— y sobre botones `.mk-btn` —que son
   `inline-flex`—. No ocultaban NADA: a quien ya tiene cuenta se le seguía
   enseñando la casilla de privacidad, y marcarla no registraba nada, porque
   su rama del servidor ni la mira. Enseñar algo que no se recoge es la otra
   mitad de la mentira que este bloque vino a quitar.
   Se cubren por CLASE y no por elemento suelto: cualquier `.au-terms` o
   cualquier `.mk-btn` que alguien esconda mañana, se esconde de verdad. */
.au-terms[hidden],
.mk-btn[hidden],
.au-fine[hidden] { display: none !important; }



/* Un dato que el servidor ya sabe, no un sitio donde se escribe. Va con
   `--ink`, que las dos hojas definen, así que se lee en cualquiera de los
   dos temas; y parte por donde sea, que un correo largo no puede sacar la
   tarjeta de sitio. */
.au-confirmado {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--ink);
  word-break: break-all; padding: 2px 0 0;
}