/* ═══════════════════════════════════════════════════════════════════════════
   CANALES · EL BANNER, DESDE LA MAQUETA DEL DUEÑO (2026-10-03)
   ───────────────────────────────────────────────────────────────────────────
   Texto a la izquierda y, a la derecha, el portátil con la bandeja de Cuho
   (dibujo de ChatGPT hecho desde su maqueta).

   LA UNIDAD. `--s` es lo que mide en pantalla un píxel de su maqueta (1774 de
   ancho): todas las medidas de aquí son «N píxeles de la maqueta × --s».
   Sale del ancho de la ventana Y de su alto, el menor de los dos — igual que
   el banner de la ayuda —, para que el banner entero, fichas de canal
   incluidas, quepa en la primera pantalla aun con la franja «Prueba Cuho
   gratis» y la barra encima (111 px). En su ventana (1280 × 585) sale 0,614:
   con 730 de divisor salía 0,649 y las fichas se cortaban por abajo, porque
   los suelos de letra (15 px la frase y los botones, 13 las garantías) hacen
   el bloque algo más alto que la maqueta a esa escala.
   ═══════════════════════════════════════════════════════════════════════════ */

.kz {
  --s: min(calc(100vw / 1774), calc((100svh - 111px) / 772), 1px);
  position: relative; overflow-x: clip;
  /* la franja y la barra ya ocupan su sitio: arriba, sólo el aire de la maqueta */
  padding: calc(56 * var(--s)) 0 calc(40 * var(--s));
}
.mk-topbar ~ .kz { padding-top: calc(56 * var(--s)); }

/* EL TEXTO EMPIEZA DONDE EMPIEZA EL LOGOTIPO DE LA BARRA (el `mk-wrap` de
   siempre). La primera columna mide lo que va del texto a la planta en su
   maqueta (603); el texto es más ancho y entra por encima del dibujo, como
   allí — la planta asoma por detrás de los botones. */
.kz-in { display: grid; grid-template-columns: calc(603 * var(--s)) minmax(0, 1fr); align-items: start; position: relative; }
.kz-tx { grid-area: 1 / 1; position: relative; z-index: 2; width: calc(690 * var(--s)); min-width: 0; }
/* EL DIBUJO, A LA DERECHA Y NUNCA MÁS DE UN 12 % MAYOR QUE EN LA MAQUETA.
   Cuando la escala la decide el alto de la ventana (la suya: 0,614 y no los
   0,713 del ancho), sobra sitio a lo ancho. Si el dibujo se lo come entero
   sale un 27 % mayor que en la maqueta y pisa la frase y la nota; así se
   queda en su tamaño, pegado a la derecha, y el aire va en medio. */
.kz-art { grid-area: 1 / 2; position: relative; z-index: 1; min-width: 0;
  justify-self: end; width: 100%; max-width: calc(1180 * var(--s));
  margin-top: calc(-34 * var(--s));
  /* hasta casi el borde de la ventana, como en la maqueta (21 px del borde) */
  margin-right: calc(-1 * clamp(18px, 4.66vw, 78px) + 21 * var(--s)); }
.kz-art img { display: block; width: 100%; height: auto; }

/* ── LA ETIQUETA, EL TITULAR Y LA FRASE ──────────────────────────────────── */
.kz-eti { margin: 0; font-size: max(11.5px, calc(14 * var(--s))); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #6d28d9; }
/* `.kz .kz-h` y no `.kz-h`: la hoja común pinta `.mk-hero h1` (clase y
   etiqueta, pesa más que una clase sola) y se quedaba con el tamaño. */
.kz .kz-h { position: relative; margin: calc(40 * var(--s)) 0 0; width: fit-content; white-space: nowrap;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; font-weight: 800;
  font-size: max(36px, calc(82 * var(--s))); line-height: .885; letter-spacing: -.045em; color: #0b0b1e; }
.kz .kz-h em { font-style: normal; color: #6d28d9; }
/* las tres rayas de su maqueta, junto a «conversaciones,» y bajando hacia la
   tercera línea */
.kz-rayas { position: absolute; width: .92em; height: .92em; margin-left: .05em; margin-top: .42em;
  fill: none; stroke: #6a1fe6; stroke-width: 3.6; stroke-linecap: round; }
.kz-sub { margin: calc(30 * var(--s)) 0 0; font-size: max(15px, calc(23 * var(--s))); line-height: 1.43; color: #5b6274; white-space: nowrap; }

/* ── LOS BOTONES ─────────────────────────────────────────────────────────── */
.kz-cta { display: flex; gap: calc(20 * var(--s)); margin-top: calc(30 * var(--s)); }
.kz-b1, .kz-b2 { display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: max(44px, calc(68 * var(--s))); padding: 0 1.45em; border-radius: 999px; white-space: nowrap;
  font-size: max(15px, calc(21 * var(--s))); font-weight: 600; text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease; }
.kz-b1 { min-width: calc(323 * var(--s)); color: #fff; background: linear-gradient(180deg, #7130f4 0%, #6620f2 55%, #5413d9 100%);
  box-shadow: 0 18px 32px -16px rgba(102,32,242,.7); }
.kz-b1 svg { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.kz-b1:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -16px rgba(102,32,242,.8); }
.kz-b1:hover svg { transform: translateX(3px); }
.kz-b2 { min-width: calc(290 * var(--s)); color: #0b0b1e; background: #fff; border: 1px solid #e3ddf7; box-shadow: 0 14px 30px -22px rgba(76,29,149,.45); }
.kz-b2:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -22px rgba(76,29,149,.55); }
.kz-play { display: grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 50%; background: #6a1fe6; color: #fff; flex: none;
  transition: transform .2s ease; }
.kz-play svg { width: .8em; height: .8em; }
.kz-b2:hover .kz-play { transform: scale(1.08); }

/* ── LAS TRES GARANTÍAS ──────────────────────────────────────────────────── */
.kz-ok { list-style: none; margin: calc(30 * var(--s)) 0 0; padding: 0; display: flex; gap: calc(38 * var(--s)); }
.kz-ok li { display: flex; align-items: center; gap: calc(14 * var(--s)); font-size: max(13px, calc(17 * var(--s))); line-height: 1.25; color: #3b3f52; }
.kz-ok img { width: max(34px, calc(50 * var(--s))); height: max(34px, calc(50 * var(--s))); flex: none; }

/* ── LAS SIETE FICHAS DE CANAL ───────────────────────────────────────────── */
.kz-marcas { list-style: none; margin: calc(28 * var(--s)) 0 0; padding: 0; display: flex; gap: calc(17 * var(--s)); }
.kz-marcas li { display: grid; place-items: center; width: max(42px, calc(67 * var(--s))); height: max(42px, calc(67 * var(--s)));
  background: #fff; border: 1px solid #ece7fb; border-radius: calc(17 * var(--s)); box-shadow: 0 12px 26px -20px rgba(76,29,149,.45);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease; }
.kz-marcas li:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 30px -20px rgba(76,29,149,.55); }
.kz-marcas img { width: 52%; height: 52%; }
.kz-mas { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; color: #7c3aed; }
.kz-mas svg { width: 42%; height: 42%; }
.kz-marcas li:has(.kz-mas) { background: #f6f3fe; }
.kz-mas:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }

/* ── LA NOTA A MANO, CON SU FLECHA HACIA LAS FICHAS ──────────────────────── */
.kz-nota { position: absolute; left: calc(640 * var(--s)); bottom: calc(2 * var(--s)); margin: 0; pointer-events: none;
  font-family: Caveat, 'Caveat', cursive; font-weight: 600; font-size: max(17px, calc(28 * var(--s))); line-height: 1.02;
  color: #5b1bd6; transform: rotate(-7deg); white-space: nowrap; }
.kz-nota-flecha { position: absolute; left: -2.3em; top: -.15em; width: 2.2em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }

/* ── POR DEBAJO DE 1040: UNA COLUMNA ─────────────────────────────────────── */
@media (max-width: 1040px) {
  .kz { --s: calc(100vw / 1200); padding: 28px 0 24px; }
  .mk-topbar ~ .kz { padding-top: 28px; }
  .kz-in { grid-template-columns: 1fr; }
  .kz-tx { width: auto; }
  .kz-art { grid-area: 2 / 1; margin: 26px auto 0; width: min(100%, 760px); }
  .kz-nota { display: none; }
}
@media (max-width: 620px) {
  .kz .kz-h, .kz-sub { white-space: normal; }
  .kz .kz-h br, .kz-sub br { display: none; }
  .kz-rayas { display: none; }
  .kz-cta { flex-direction: column; align-items: stretch; }
  .kz-ok { flex-direction: column; gap: 12px; }
  .kz-ok br { display: none; }
  /* las siete en una fila: 7 × 40 + 6 × 8 = 328, y un móvil de 390 deja 342 */
  .kz-marcas { flex-wrap: wrap; gap: 8px; }
  .kz-marcas li { width: 40px; height: 40px; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .kz-b1, .kz-b1:hover, .kz-b1 svg, .kz-b2, .kz-b2:hover, .kz-play, .kz-marcas li, .kz-marcas li:hover { transition: none; transform: none; }
}