/* ════════════════════════════════════════════════════════════════════════════
   CUHO · REBRAND WEB PÚBLICA (estilo "grande y limpio" tipo Semrush 2026)
   Hoja de RE-TEMA: se carga DESPUÉS de site.css y re-pinta el mismo contrato
   de clases en claro (tinta sobre papel, lavanda Cuho, píldoras, tipografía
   gigante). site.css conserva TODO el layout; aquí solo vive el tema.

   @version 65

   LA VERSIÓN VIVE AQUÍ, en el fichero que cambia, y las treinta y dos páginas
   la repiten al pedir la hoja. Si se cambian los colores hay que subirla EN LOS
   DOS SITIOS: quien ya tuviera la hoja guardada seguiría viendo la de antes. El
   banco `bk-la-web-publica-tiene-un-solo-papel` comprueba que no se separen.

   Y AQUÍ NO SE ESCRIBE EL NÚMERO OTRA VEZ, ni de ejemplo. Estaba escrito ahí
   arriba como `?v=34` para ilustrar, y al subir la hoja a 35 se quedó viejo: el
   propio comentario pasó a decir una versión que ya no era. Lo cazó
   `bk-el-acceso-no-echa-a-nadie`, que recorre `public/` y `src/` y exige que
   cada estático se pida SIEMPRE con la misma versión —comentarios incluidos,
   porque un comentario que miente es lo que va a leer el siguiente.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── EL PAPEL ES LAVANDA, NO CREMA ──────────────────────────────────
     La maqueta pinta toda la web sobre un lavanda muy claro que se va
     cerrando hacia abajo, no sobre el papel cálido de antes. El token vive
     aquí y no en cada página porque el fondo es DEL SITIO: copiado en treinta
     y dos sitios, el día que cambie quedarían páginas de dos colores. */
  --bg: #f7f5fd;            /* lavanda muy claro: el papel */
  --bg-alto: #fcfbff;       /* la parada de arriba del degradado */
  --bg-2: #efebfa;          /* la de abajo */
  --panel: #ffffff;
  --panel-2: #f6f5fb;
  --line: #e7e4ef;
  --line-2: #d9d5e6;
  --ink: #16181d;           /* tinta casi negra */
  --ink-2: #3d4048;
  /* LA TINTA APAGADA, MÁS OSCURA QUE ANTES. Sobre el papel crema plano daba
     4,81:1 en toda la pantalla. El degradado nuevo va FIJO a la ventana, así
     que el tercio de abajo de CADA pantalla es el tono más oscuro y ahí caía a
     4,29:1, por debajo del mínimo, en las treinta y dos páginas. Con este tono
     el peor caso son 4,85:1. Lo vigila la ley 8 de
     `bk-la-web-publica-tiene-un-solo-papel`. */
  --muted: #62667a;
  --purple: #6d28d9;        /* morado Cuho */
  --purple-2: #6d28d9;
  --violet: #7c3aed;
  --lav: #b18cf7;           /* lavanda (CTA acento) */
  --lav-soft: #d9c8fb;
  --mint: #e7f1ec;          /* pastel tarjetas */
  --ice: #e8eef7;
  --blue: #4f7df9;
  --cyan: #60a5fa;
  --green: #16a34a;
  --amber: #f59e0b;
  --grad: linear-gradient(120deg, #7c3aed, #a855f7 52%, #6d28d9);
  --grad-text: linear-gradient(105deg, #7c3aed, #a855f7 55%, #6d28d9);
  --glow: 0 24px 70px -24px rgba(76, 29, 149, .35);
  --r-lg: 24px;
  --r-md: 16px;
}

/* EL DEGRADADO VA FIJO: si se desplazara con la página, en una página larga el
   lavanda del final se repetiría una y otra vez por bandas. */
/* Y LAS TRES PARADAS SALEN DE LOS TOKENS. Estaban escritas a mano aquí, con lo
   que `--bg` —el token que todo el mundo mira— no pintaba UN SOLO PÍXEL: el
   degradado lo tapaba entero y el otro consumidor (`.sky`) está apagado treinta
   líneas más abajo. Se podía poner `--bg: red` y la web se veía igual. Un
   token que no se ve no es el papel, es un número. */
body {
  background-color: var(--bg);
  /* EL PAPEL DE LA CASA: el dibujo encima del degradado de siempre, los dos
     `fixed`. El dibujo cubre la ventana y no se mueve al bajar, que es lo que
     hace que sea UN papel y no ocho trozos. El degradado se queda debajo
     porque es el que da el tono general y el que sostiene el color si el
     dibujo no llegara. Ver el bloque «UN SOLO PAPEL PARA TODA LA PÁGINA». */
  background-image:
    url('/assets/web/fondo/papel.webp'),
    linear-gradient(180deg, var(--bg-alto) 0%, var(--bg) 46%, var(--bg-2) 100%);
  background-size: cover, auto;
  background-position: center center, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--ink);
}
::selection { background: rgba(177, 140, 247, .4); color: var(--ink); }

/* ── Fondo: fuera la aurora oscura; degradado suave menta/hielo/lavanda ─── */
.sky {
  background:
    radial-gradient(1000px 480px at 82% -6%, rgba(177, 140, 247, .28), transparent 60%),
    radial-gradient(900px 520px at 12% 4%, rgba(126, 226, 191, .18), transparent 58%),
    radial-gradient(1100px 620px at 50% 22%, rgba(96, 165, 250, .12), transparent 62%),
    var(--bg);
}
.sky::before { display: none; }
.sky i { display: none; }

/* ── Barra de anuncio (arriba del todo) ─────────────────────────────────── */
.mk-topbar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--lav); color: var(--ink);
  padding: 9px 16px; font-size: 13.5px; letter-spacing: .01em;
  position: relative; z-index: 60;
}
.mk-topbar b { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mk-topbar span { opacity: .85; }
.mk-topbar:hover span { text-decoration: underline; }
/* LA FRANJA DE AYUDA LLEVA UNA PREGUNTA, NO UN RÓTULO: «¿Necesitas ayuda?»
   va en negrita y con su caja de siempre, como en la maqueta. */
.mk-topbar--frase b { text-transform: none; letter-spacing: 0; }

/* ── QUE NO SE NOTE QUE SON IMÁGENES ────────────────────────────────────────
   Encargo del dueño (2026-10-03), con una captura arrastrando el dibujo del
   banner de ayuda por la pantalla: «no quiero que se note que son imágenes,
   para todas las imágenes». En toda la web pública:
     · no se arrastran (`-webkit-user-drag`; Firefox no lo entiende y lo hace
       site-nav.js, y en las cinco páginas sin guion, `draggable="false"`);
     · los enlaces que llevan una imagen tampoco: si no, el fantasma del
       arrastre sería otra vez la imagen;
     · no se tiñen de azul al seleccionar el texto de alrededor;
     · en el móvil no sale el «Guardar imagen» al dejar el dedo encima;
     · y los dibujos —lo que va dentro de un `aria-hidden`, que por contrato
       no lleva nada que pulsar— no reciben el ratón: el botón derecho sobre
       ellos es el de la página, sin «Guardar imagen como…». */
img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a:has(img) { -webkit-user-drag: none; }
[aria-hidden="true"] img { pointer-events: none; }

/* ── NAV: blanco, tinta, píldoras ───────────────────────────────────────── */
/* LA CABECERA, DEL MISMO PAPEL QUE LA PÁGINA. Llevaba el crema de antes
   (251,250,247) y, sobre el lavanda nuevo, se veía la costura: una franja
   amarillenta arriba y el resto en frío.
   Y el tono es el de la parada DE ARRIBA, no el del medio: el degradado va
   fijo al hueco de la ventana, así que detrás de la cabecera siempre está el
   0 %. Con el tono del medio la costura seguía ahí, sólo que de cuatro
   unidades en vez de cuarenta. */
.mk-nav { background: rgba(252, 251, 255, .85); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
.mk-nav.is-scrolled { background: rgba(255, 255, 255, .92); border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(22, 24, 29, .35); }
.mk-nav-progress { background: var(--purple); }
.mk-logo b { color: var(--ink); font-size: 22px; letter-spacing: -.02em; }
.mk-nav-links a { color: var(--ink-2); font-weight: 600; }
.mk-nav-links a:hover, .mk-nav-links a.is-active { color: var(--ink); }
.mk-nav-login {
  color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 10px 22px; font-weight: 700; transition: background .15s, color .15s;
}
.mk-nav-login:hover { background: var(--ink); color: #fff; }
.mk-nav-toggle { color: var(--ink); }
.mk-mobile-menu { background: #fff; border-color: var(--line); }
.mk-mobile-menu a { color: var(--ink); }

/* ── Botones: píldoras rotundas ─────────────────────────────────────────── */
.mk-btn { border-radius: 999px; font-weight: 700; letter-spacing: -.01em; }
.mk-btn-primary { background: var(--ink); color: #fff; box-shadow: none; }
.mk-btn-primary::after { display: none; }
.mk-btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 26px -14px rgba(22, 24, 29, .55); }
.mk-btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.mk-btn-ghost:hover { background: var(--ink); color: #fff; }

/* ── HERO: titular gigante centrado + captura tipo buscador ─────────────── */
.mk-hero { position: relative; padding-top: 64px; }
.mk-hero::after {
  /* barritas verticales al pie del hero (textura de la cabecera) */
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 130px;
  background: repeating-linear-gradient(90deg, rgba(109, 40, 217, .16) 0 3px, transparent 3px 10px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
  mask-image: linear-gradient(180deg, transparent, #000 85%);
  pointer-events: none; z-index: -1;
}
.mk-hero-grid { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.mk-hero-text { max-width: 1020px; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* SIN CÁPSULA (el dueño, 2026-10-03: «quita estos circulitos»). site.css le
   pone fondo, borde y relleno; aquí se quitan los tres y queda la etiqueta. */
.mk-pill { background: none; border: 0; padding-left: 0; padding-right: 0; color: var(--ink-2); font-weight: 700; white-space: nowrap; }
/* Y SU ICONO CON MEDIDAS. Sin esto la píldora salía de 139x78 —un globo— con
   el texto partido en tres. Tercera vez hoy con la misma forma: un `<svg>`
   sin `width` dentro de una caja que no se lo pone. */
.mk-pill > svg { width: 13px; height: 13px; flex: none; color: var(--purple); }
.mk-pill .dot { background: var(--purple); box-shadow: none; }
.mk-hero h1 {
  color: var(--ink);
  /* EL TOPE ES 78 Y NO 92, y el número está medido, no elegido a ojo. El titular
     nuevo son dos ideas separadas por un `<br>`: «Cuho entiende a tus clientes» y
     «y sabe qué hacer después». El contenedor del texto mide 1020 como mucho, y a
     92 px la primera mitad no cabe: se parte y deja «clientes» y «después» solos
     en su línea — cuatro líneas y dos huérfanas. A 78 el h1 ocupa 973 de esos
     1020, o sea que cada idea cabe entera en la suya con 47 px de margen. El
     umbral está en unos 81. */
  font-size: clamp(46px, 7vw, 78px);
  line-height: 1.02; letter-spacing: -.045em; font-weight: 800;
  margin: 18px 0 20px;
}
.mk-grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-hero-sub { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 640px; margin: 0 auto; }
.mk-hero-sub strong { color: var(--ink); }
.mk-cta-trust { justify-content: center; color: var(--muted); }
.mk-cta-trust svg { color: var(--green); }

/* Píldora de registro (input + botón lavanda, protagonista del hero) */
.mk-heromail {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 8px 8px 24px;
  width: min(620px, 92vw); margin: 26px auto 18px;
  box-shadow: 0 24px 60px -22px rgba(76, 29, 149, .28), 0 2px 10px rgba(22, 24, 29, .05);
}
.mk-heromail input {
  flex: 1; border: 0; outline: 0; background: none; min-width: 0;
  font: inherit; font-size: 16.5px; color: var(--ink);
}
.mk-heromail input::placeholder { color: #a7abb6; }
.mk-heromail button {
  border: 0; cursor: pointer; flex: none;
  background: var(--lav); color: var(--ink);
  font: inherit; font-weight: 800; font-size: 16px; letter-spacing: -.01em;
  border-radius: 999px; padding: 14px 28px;
  transition: background .15s, transform .15s;
}
.mk-heromail button:hover { background: #a379f2; transform: translateY(-1px); }

/* La demo del producto: ventana flotante clara sobre el degradado */
.mk-hero-stage { width: min(1080px, 100%); perspective: none; }
.mk-hero-glow {
  /* 67%, no 60%: la caja ha dejado de sobresalir un 6% por cada lado (site.css), así que el
     radio se recalcula sobre el ancho nuevo para que el halo mida lo mismo que medía. */
  background: radial-gradient(67% 70% at 50% 40%, rgba(177, 140, 247, .35), transparent 70%);
  filter: none;
}
.hero-card { animation: none; }
.mk-demo {
  background: #fff !important; color: #0f172a;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 60px 120px -40px rgba(35, 18, 79, .35), 0 4px 18px rgba(22, 24, 29, .06);
}

/* Demo: revertir la capa oscura de site.css a la versión CLARA (producto real) */
.mk-demo-top { border-bottom-color: #eef0f6; background: #fff; }
.mk-demo-top .brand b { color: #6d28d9; }
.mk-demo-top .tools { color: #b7bed0; }
.mk-demo-col + .mk-demo-col { border-left-color: #eef0f6; }
.mk-demo-h { color: #8c93a8; }
.mk-ch-item { color: #3d4048; }
.mk-ch-item:hover { background: #f5f6fb; }
.mk-ch-item.is-on { background: #f1ebfe; color: #6d28d9; }
.mk-ch-item .ct { background: #eef1f8; color: #8c93a8; }
.mk-ch-item.is-on .ct { background: #fff; color: #6d28d9; }
.mk-ch-add { border-color: #dadfeb; color: #8c93a8; }
.mk-tabs button { color: #8c93a8; }
.mk-conv:hover { background: #f5f6fb; }
.mk-conv.is-on { background: #f1ebfe; }
.mk-conv-mid strong { color: #16181d; }
.mk-conv-mid .tm, .mk-conv-mid .pv { color: #8c93a8; }
.mk-conv-chdot { border-color: #fff; }
.mk-conv-empty { color: #8c93a8; }
.mk-chat-head { border-bottom-color: #eef0f6; }
.mk-chat-head strong { color: #16181d; }
.mk-chat-head .chn { color: #8c93a8; }
.mk-chat-msgs { background: #f7f8fc !important; }
.mk-msg.them { background: #fff; border-color: rgba(0, 0, 0, .06); color: #1f2430; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.mk-msg-card { background: #fff; border-color: #eef0f6; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.mk-msg-card strong { color: #16181d; }
.mk-msg-card span { color: #8c93a8; }
.mk-msg-card a { color: #6d28d9; }
/* La acción de Cuho, en claro. Verde apagado y legible: tiene que leerse como el
   registro de algo hecho, no como una felicitación. */
.mk-msg-action { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.mk-msg-action-ic { background: #dcfce7; color: #16a34a; }
.mk-msg-action-copy span { color: #4b7a5b; }
.mk-chat-input { background: #fff; border-top-color: #eef0f6; }
.mk-chat-input .box { background: #f2f4f9; color: #9aa3b5; }

/* ── Marquesina: chips grises discretos (tira de logos) ─────────────────── */
.marquee { opacity: .8; }
.mq-chip { background: none; border: 0; color: var(--muted); font-weight: 800; font-size: 15px; }
.mq-chip .ic { filter: grayscale(1) opacity(.55); }
.marquee:hover .mq-chip .ic { filter: none; }

/* ── Cabeceras de sección: tinta gigante ────────────────────────────────── */
.mk-eyebrow { color: var(--purple); background: none; border: 0; font-weight: 800; letter-spacing: .1em; }
.mk-section-head h2 { color: var(--ink); font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1.06; }
.mk-section-head p { color: var(--muted); }

/* ── BENTO: tarjetas pastel con textura de rayado diagonal ──────────────── */
.bcard {
  background:
    repeating-linear-gradient(135deg, rgba(109, 40, 217, .05) 0 2px, transparent 2px 9px),
    var(--mint);
  border: 1px solid transparent; color: var(--ink);
  border-radius: 20px;
  box-shadow: none;
}
.bcard::before { display: none; }
.bcard:nth-of-type(odd) {
  background:
    repeating-linear-gradient(135deg, rgba(79, 125, 249, .05) 0 2px, transparent 2px 9px),
    var(--ice);
}
.bcard:hover { transform: translateY(-4px); border-color: var(--lav); box-shadow: 0 22px 50px -26px rgba(76, 29, 149, .35); }
.bcard h3 { color: var(--ink); letter-spacing: -.015em; }
.bcard p { color: var(--ink-2); }
.bcard .new { background: var(--ink); color: #fff; }

/* Panel del producto dentro del bento: ventana blanca flotante */
.mk-panel-wrap { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 40px 90px -40px rgba(35, 18, 79, .28); }
.mk-pnl { background: #fff; border: 0; box-shadow: none; }
.mk-pnl-top { background: #fff; border-bottom: 1px solid #eef0f6; }
.mk-pnl-top .brand b { color: #6d28d9; }
.mk-pnl-live { color: var(--green); background: #ecfdf3; border: 0; }
.mk-pnl-live i { background: var(--green); }
.mk-pnl-body { background: #fff; }
.mk-pnl-side { background: #f8f7fc; border-right: 1px solid #eef0f6; }
.mk-pnl-grp { color: #9aa0af; }
.mk-pnl-item { color: #3d4048; }
.mk-pnl-item.is-on { background: #f1ebfe; color: #6d28d9; }
.mk-pnl-item .d { background: #6d28d9; }
.mk-pnl-sec-h { color: var(--ink); }
.mk-pnl-sec-sub { color: var(--muted); }
.mk-pnl-sec-h2 { color: var(--ink); }
.mk-pnl-btn { background: #f1ebfe; color: #6d28d9; border: 0; }
.mk-pnl-step { background: #f8f7fc; border: 1px solid #eef0f6; color: var(--ink); }
.mk-pnl-step span { color: var(--muted); }
.mk-pnl-ch { background: #fff; border: 1px solid #eef0f6; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.mk-pnl-ch .st { color: var(--green); }
.mk-pnl-ch .st i { background: var(--green); }
.mk-pnl-ch > span:last-child { color: var(--muted); }
.mk-pnl-right { background: #fff; }
.mk-pnl-card { background: #f8f7fc; border: 1px solid #eef0f6; }
.mk-pnl-card-h { color: var(--ink); }
.mk-pnl-card-h .dot { background: var(--green); }
.mk-pnl-metric span { color: var(--muted); }
.mk-pnl-metric b { color: var(--ink); }
.mk-pnl-metric em.up { color: var(--green); background: #ecfdf3; }
.mk-pnl-metric em.dn { color: #dc2626; background: #fef2f2; }

/* ── Cómo funciona: pasos con número gigante ────────────────────────────── */
.step { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.step:hover { border-color: var(--lav); box-shadow: 0 20px 44px -26px rgba(76, 29, 149, .3); }
.step .n {
  background: none; -webkit-text-fill-color: initial; border: 0;
  color: #ddd6ee; font-size: 56px; font-weight: 800; letter-spacing: -.04em;
  width: auto; height: auto;
}
.step h3 { color: var(--ink); }
.step p { color: var(--muted); }

/* ── Stats: cifras GIGANTES en gris claro (marca de la casa) ────────────── */
.mk-stats { background: none; border: 0; box-shadow: none; }
.mk-stat b {
  background: none; -webkit-text-fill-color: initial; color: #d5d0e4;
  font-size: clamp(56px, 7vw, 104px); font-weight: 800; letter-spacing: -.05em; line-height: 1;
}
.mk-stat span { color: var(--ink-2); font-weight: 700; }

/* ── Canales: tarjetas blancas con borde ────────────────────────────────── */
.mk-channel { background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 18px; }
.mk-channel small { color: var(--muted); }
.mk-channel:hover { border-color: var(--ch, var(--lav)); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(22, 24, 29, .25); }
.mk-channel .go { background: #f4f2fa; color: var(--ink-2); }
.mk-channel .nu { background: var(--ink); color: #fff; }

/* Las reglas del pop-up «qué ofrece este canal» se han borrado con su JavaScript:
   su marcado se quitó de la portada el 2026-08-15 y llevaban un mes sin vestir nada.
   El texto que enseñaba está en `docs/channel-copy-legacy.md`. */
/* ── Testimonios ────────────────────────────────────────────────────────── */
.mk-testi { background: #fff; border: 1px solid var(--line); border-radius: 20px; color: var(--ink-2); }
.mk-testi:hover { border-color: var(--lav); box-shadow: 0 20px 44px -28px rgba(76, 29, 149, .3); }
.mk-testi p { color: var(--ink-2); }
.mk-stars { color: var(--amber); }
.mk-testi-who strong { color: var(--ink); }
.mk-testi-who span { color: var(--muted); }
.mk-testi-av { background: var(--grad); }

/* ── CTA final: panel negro redondeado (bloque "enterprise") ────────────── */
.mk-cta {
  background: #101014; border: 0; border-radius: 28px;
  box-shadow: 0 40px 90px -40px rgba(16, 16, 20, .55);
}
.mk-cta h2 { color: #fff; font-size: clamp(30px, 3.8vw, 48px); letter-spacing: -.03em; }
.mk-cta p { color: #b9bcc6; }
.mk-cta .mk-btn-primary { background: var(--lav); color: var(--ink); }
.mk-cta .mk-btn-primary:hover { background: #a379f2; }
.mk-cta .mk-cta-trust { color: #9a9daa; justify-content: flex-start; }

/* ── FOOTER: tinta ──────────────────────────────────────────────────────── */
.mk-footer { background: #101014; border-top: 0; }
.mk-footer .mk-logo b { color: #fff; }
.mk-footer-about { color: #9a9daa; }
.mk-foot-col h5 { color: #fff; }
.mk-foot-col a { color: #9a9daa; }
.mk-foot-col a:hover { color: #fff; }
.mk-foot-social a { background: rgba(255, 255, 255, .08); color: #d5d7de; border: 0; }
.mk-foot-social a:hover { background: var(--lav); color: var(--ink); }
.mk-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); color: #9a9daa; }

/* ── PRECIOS ────────────────────────────────────────────────────────────── */
/* ══ EL BANNER DE PRECIOS, SEGÚN LA MAQUETA 54 ═══════════════════════════
   A los lados del titular van el ANTES y el DESPUÉS: a la izquierda tres
   mensajes llegando por tres canales distintos, a la derecha la cita cerrada y
   el número del panel. Es lo que explica por qué cuesta lo que cuesta, y por
   eso no es adorno prescindible aunque vaya marcado como dibujo.
   LAS DOS COLUMNAS SE COLOCAN CONTRA `.pr-hero`, que es la envoltura del
   banner. Contra la ventana se irían a tomar viento en cuanto cambie el ancho.
   Y por debajo de 1.240 se esconden: a partir de ahí se comerían el titular,
   que es lo único que no puede faltar. */
.pr-hero { position: relative; }
.pr-flota { position: absolute; top: 0; display: grid; gap: 12px; text-align: left; pointer-events: none; }
.pr-flota--izq { left: 0; width: 256px; transform: rotate(-4deg); }
.pr-flota--der { right: 0; width: 256px; padding-top: 58px; transform: rotate(-4deg); }
@media (max-width: 1240px) { .pr-flota { display: none; } }

.pr-msg {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
  gap: 4px 11px; padding: 12px 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 38px -24px rgba(35, 20, 80, .5);
}
.pr-msg:nth-of-type(2) { margin-left: 22px; }
.pr-msg:nth-of-type(3) { margin-left: 10px; }
.pr-msg img { width: 34px; height: 34px; display: block; }
.pr-msg b { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #3d3a52; }
.pr-msg u { text-decoration: none; font-size: 11px; color: #a09dba; }
/* Los dos trazos de boli de la esquina, que en el dibujo están y son los que
   dicen que esto es un apunte y no una captura. */
.pr-plumas { position: absolute; left: -26px; top: 42px; width: 34px; height: 34px; color: #7c3aed; }
.pr-plumas svg { width: 100%; height: 100%; }

.pr-cita {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
  padding: 16px 18px; border-radius: 18px; background: #fff;
  box-shadow: 0 20px 44px -26px rgba(35, 20, 80, .5);
}
.pr-cita-t { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #15a349; }
.pr-cita-t svg { width: 20px; height: 20px; flex: none; }
.pr-cita > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.pr-cita > span { min-width: 0; }
.pr-cita > span b { display: block; font-size: 13px; color: var(--ink); }
.pr-cita > span em { font-style: normal; font-size: 12.5px; color: #8b88a8; }

/* LA FICHA DEL PANEL, CON LA MISMA CIFRA QUE /funciones/analitica. En la
   maqueta pone «Más clientes +32 %», que es una promesa sobre lo que le va a
   pasar a quien lee. Esto es lo otro: un trozo del panel, con su métrica, su
   número y su variación, igual que en la página de analítica. */
.pr-kpi {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-left: 30px; padding: 14px 18px; border-radius: 18px; background: #fff;
  box-shadow: 0 20px 44px -26px rgba(35, 20, 80, .5);
}
.pr-kpi small { display: block; font-size: 11.5px; color: #8b88a8; }
.pr-kpi b { display: block; font-family: var(--font-display, inherit); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.pr-kpi em { font-style: normal; font-size: 12.5px; font-weight: 800; color: #15a349; }
.pr-kpi i { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.pr-kpi s { display: block; width: 8px; border-radius: 4px; background: #c9b8fb; text-decoration: none; }
.pr-kpi s:last-child { background: #7c3aed; }

.pr-nota {
  position: absolute; margin: 0; width: max-content;
  font-family: var(--font-mano, 'Caveat', cursive); font-size: 21px; line-height: 1.16; color: #7c3aed;
}
.pr-nota--izq { left: 4px; top: 100%; margin-top: 30px; }
.pr-nota--izq .pr-curva { right: 100%; bottom: 0; margin-right: 6px; transform: scaleX(-1); }
/* DENTRO DE LA COLUMNA, NO ENCIMA. Con `bottom: 100%` la nota se iba a
   y = −15,8 —fuera del banner— y la sección la cortaba entera. */
.pr-nota--der { right: 0; top: 0; text-align: right; }
.pr-nota--der .pr-curva { left: 100%; top: 40%; margin-left: 4px; }
.pr-curva { position: absolute; width: 40px; height: 50px; fill: none; stroke: #7c3aed; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* LAS CUATRO PALOMITAS DEBAJO DEL TITULAR. «Soporte en todo momento», que es
   lo que pone el dibujo, no lo promete la web en ninguna parte: promete
   soporte en español, por email y prioritario. Se queda el que es verdad. */
/* LAS CUATRO EN UN RENGLÓN, Y POR DEBAJO DE LAS TARJETAS.
   Dentro de la caja del centro —660— se caían a dos filas. Sacadas de ella y a
   780 caben en una, pero a esa altura la última se metía debajo de la ficha del
   panel, que empieza en 1.000. Estrecharlas a 720 las volvía a partir en dos:
   EL PROBLEMA NO ERA EL ANCHO, era que estaban a la MISMA ALTURA que las
   tarjetas. Bajan 60 px —la ficha acaba en 415 y la nota de la izquierda en
   434— y ya no compiten con nadie por el sitio. */
.pr-checks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
  max-width: 800px; margin: 60px auto 0; padding: 0; list-style: none;
}
.pr-checks li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #585f73; }
.pr-checks svg { width: 9px; height: 9px; padding: 4px; color: #7c3aed; flex: none; box-sizing: content-box; border-radius: 50%; background: #e9e4fc; }

/* EL CENTRO CABE ENTRE LAS DOS COLUMNAS, Y NI UN PÍXEL MÁS. 1.250 de ventana
   menos dos columnas de 256 y su aire dejan 660 en medio. El subtítulo iba a
   700 y las palomitas a 1.132: las dos se metían por debajo de las tarjetas.
   Y LA TEXTURA DE BARRITAS SE VA EN ESTA PÁGINA. Está en el banner de las
   treinta y dos, pero aquí compite con seis tarjetas blancas flotando y el
   dibujo del dueño tiene el papel liso. Se quita SÓLO aquí, con su clase. */
.pr-centro { max-width: 660px; margin: 0 auto; }
.mk-hero--precios { padding-top: 132px; padding-bottom: 34px; }
.mk-hero--precios::after { display: none; }

/* EL CONMUTADOR, COMO EN LA MAQUETA: la pastilla elegida va BLANCA con el
   borde morado, no negra. El negro la convertía en el elemento más oscuro de
   toda la página —más que el titular— y se llevaba el ojo antes que los
   precios, que es lo que se ha venido a ver. */
.mk-toggle { background: #fff; border: 1px solid #ece7f8; padding: 6px; border-radius: 86.87em; box-shadow: 0 14px 34px -22px rgba(35, 20, 80, .45); }
.mk-toggle button { color: var(--ink-2); border-radius: 86.87em; padding: 10px 22px; }
.mk-toggle button.is-on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.6px var(--purple); }
.mk-toggle .save { background: #f0ebfe; color: var(--purple); border-radius: 86.87em; padding: 2px 8px; margin-left: 7px; }

/* EL ICONO DE CADA PLAN. En la maqueta cada tarjeta abre con su círculo de
   color —el brote, el rayo, la corona, la estrella—, y es lo que hace que los
   cuatro se distingan de un vistazo antes de leer un solo número. */
.mk-plan-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  margin-bottom: 16px;
}
.mk-plan-ic svg { width: 22px; height: 22px; }
.mk-plan-ic--gratis { background: #eafaf0; color: #15a349; }
.mk-plan-ic--basico { background: #f0ebfe; color: #6d28d9; }
.mk-plan-ic--pro { background: #fdeee2; color: #d97706; }
.mk-plan-ic--premium { background: #fdf6e3; color: #ca8a04; }

.mk-plan { background: #fff; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); }
.mk-plan:hover { border-color: var(--lav); box-shadow: 0 22px 50px -28px rgba(76, 29, 149, .3); }
.mk-plan--pop { border: 2px solid var(--purple); box-shadow: 0 26px 60px -30px rgba(109, 40, 217, .4); background: #fff; }
.mk-plan-badge { background: var(--purple); color: #fff; }
.mk-plan h3 { color: var(--ink); }
.mk-plan-desc { color: var(--muted); }
.mk-plan-price b { color: var(--ink); }
.mk-plan-price span, .mk-plan-cycle { color: var(--muted); }
.mk-plan-feats li { color: var(--ink-2); }
/* LOS BOTONES DE LAS TARJETAS.
   LA FLECHA SE SALÍA. `.mk-btn` no le pone tamaño a su icono, así que un `<svg>`
   con `viewBox` y sin medidas se estira a lo que le dejen: en la tarjeta de
   Gratis salió de 44 px y partió «Crear cuenta gratis» en tres renglones.
   Y EL DE PRO VA MORADO, no negro: negro hay uno en la barra de arriba y otro
   aquí, y el de aquí es el que dice cuál es el plan que se recomienda. El
   negro es el color de «entrar»; el morado, el de «éste». */
.mk-plan .mk-btn { white-space: nowrap; }
.mk-plan .mk-btn svg { width: 16px; height: 16px; flex: none; }
.mk-plan .mk-btn-primary { background: var(--purple); }
.mk-plan .mk-btn-primary:hover { background: #5b21b6; }

/* LA PALOMITA VA MORADA, como en la maqueta. En verde parecía un estado —«esto
   está bien», «esto funciona»— y no lo es: es una lista de lo que entra en el
   plan. La cruz de lo que NO entra sí se queda apagada, que ahí sí hay estado. */
.mk-plan-feats .ck { background: #f0ebfe; color: var(--purple); border-radius: 50%; }
.mk-plan-feats li.off { color: #b3b6c0; }
.mk-plan-feats li.off .ck { background: #f2f2f5; color: #b3b6c0; }
.mk-compare-wrap { background: #fff; border: 1px solid var(--line); }
.mk-compare th { color: var(--ink); background: #f8f7fc; }
.mk-compare th.col-pop, .mk-compare .col-pop { background: #f1ebfe; color: #6d28d9; }
.mk-compare td { color: var(--ink-2); border-color: var(--line); }
.mk-compare td:first-child { color: var(--ink); }
/* LA PALOMITA DE LA TABLA ES LA MISMA QUE LA DE LAS TARJETAS. Al pasar las de
   arriba a morado me quedaron éstas en verde: en la MISMA página, la misma
   marca de «esto entra» pintada de dos colores, a dos pantallazos de
   distancia. La cruz de lo que NO entra sí se queda apagada, que ahí sí hay
   estado que contar. */
.mk-compare .yes { background: #f0ebfe; color: var(--purple); border-radius: 50%; }
.mk-compare .no { color: #c2c5ce; }
.mk-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.mk-faq-q { color: var(--ink); }
.mk-faq-a p { color: var(--muted); }

/* ── AUTH (login / registro) ────────────────────────────────────────────── */
/* SIN FONDO PROPIO: el degradado de la página va fijo y entero. Si esta caja
   pintara el color plano encima, en el borde de arriba y de abajo se vería el
   escalón contra el degradado. */
.au-main { background: transparent; }
.au-card { background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 70px -34px rgba(35, 18, 79, .25); color: var(--ink); }
.au-card h2 { color: var(--ink); }
.au-card .lead { color: var(--muted); }
.au-left h1 { color: var(--ink); }
.au-left > p { color: var(--muted); }
.au-points li { color: var(--ink-2); }
.au-points strong { color: var(--ink); }
.au-points span { color: var(--muted); }
.au-field label { color: var(--ink-2); }
.au-input { background: #fff; border: 1.5px solid var(--line-2); color: var(--ink); }
.au-input::placeholder { color: #a7abb6; }
.au-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(109, 40, 217, .12); }
.au-oauth-btn { background: #fff; border: 1.5px solid var(--line-2); color: var(--ink); }
.au-oauth-btn:hover { background: #f6f5fb; }
.au-divider { color: var(--muted); }
.au-divider::before, .au-divider::after { background: var(--line-2); }
.au-meta, .au-fine, .au-terms { color: var(--muted); }
.au-meta a, .au-terms a { color: var(--purple); }
.au-alt { color: var(--muted); }
.au-alt a { color: var(--purple); }
.au-error { color: #b3261e; }

/* ════════════════════════════════════════════════════════════════════════════
   TOUR DE PRODUCTO (secciones profundas alternadas, estilo Semrush)
   ════════════════════════════════════════════════════════════════════════════ */
.pd { padding: 44px 0; }
.pd-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
/* Un hijo de rejilla nace con «anchura mínima automática»: nunca baja de su
   min-content. En la portada, a 375 px, el min-content de una lista larga
   (620 px) estiraba la columna a 385 y la PÁGINA ENTERA se iba de ancho
   (scrollWidth 474 sobre 375, medido en Chrome dentro de un iframe de 375;
   Chrome sin ventana no baja de 512 y ahí no se veía). Con min-width:0 manda
   la rejilla y el texto envuelve, que es lo que se quiere.
   Va aquí, en la hoja compartida, y no en cada página: dos de las cinco de
   Funciones ya lo llevaban parcheado por su cuenta y la portada no. */
.pd-grid > * { min-width: 0; }
.pd-grid.pd-flip .pd-txt { order: 2; }
.pd-grid.pd-flip .pd-shot { order: 1; }
.pd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--c, #6d28d9) 12%, #fff);
  color: var(--c, #6d28d9); font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 7px 14px; letter-spacing: .02em;
}
.pd-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #6d28d9); }
.pd-txt h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.08; margin: 14px 0 12px; color: var(--ink); }
.pd-txt > p { color: var(--muted); font-size: 16.5px; margin: 0 0 16px; }
.pd-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.pd-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.pd-list .ck { width: 20px; height: 20px; flex: none; border-radius: 50%; background: #ecfdf3; color: var(--green); display: grid; place-items: center; margin-top: 1px; }
.pd-list .ck svg { width: 11px; height: 11px; }
.pd-shot {
  position: relative; border-radius: 24px; padding: 30px;
  background:
    repeating-linear-gradient(135deg, rgba(109, 40, 217, .05) 0 2px, transparent 2px 10px),
    var(--pdbg, var(--mint));
}
.pd-win { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 70px -32px rgba(35, 18, 79, .35); overflow: hidden; }
.pd-win-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #eef0f6; font-size: 12px; font-weight: 800; color: var(--ink); }
.pd-win-top i { width: 8px; height: 8px; border-radius: 50%; background: #e3e1ee; }
.pd-win-top i:first-child { background: #fda4af; }
.pd-win-top i:nth-child(2) { background: #fcd34d; }
.pd-win-top i:nth-child(3) { background: #86efac; }
.pd-win-top span { margin-left: 6px; }
.pd-win-body { padding: 16px; }

/* Maqueta: chat IA */
.pdm-msg { max-width: 88%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.45; margin-bottom: 8px; }
.pdm-msg.in { background: #f2f4f9; color: #1f2430; border-bottom-left-radius: 4px; }
.pdm-msg.out { background: linear-gradient(120deg, #7c3aed, #a855f7); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.pdm-card { border: 1px solid #eef0f6; border-radius: 12px; padding: 10px 12px; margin: 8px 0; display: flex; gap: 10px; align-items: center; font-size: 12.5px; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
/* ── LA MINIATURA DE «PRODUCTO DEL CATÁLOGO» ─────────────────────────────────
   Aquí había un cuadrado de 38×38 con un degradado gris y NADA dentro. No estaba
   roto —no era un `<img>`, ni había `src` que fallara— pero al lado de un nombre
   de producto y un precio se leía como una foto que no ha cargado. Era el único
   sitio de la portada donde algo parecía averiado sin estarlo.
   No se pone una foto: la tarjeta vive dentro del Simulador, que demuestra cómo
   Cuho responde con el catálogo REAL de cada negocio, y una foto inventada
   fingiría un catálogo que no existe. Se pone un icono de caja: dice «esto es un
   artículo de tu catálogo» sin pretender ser una fotografía.
   UN SOLO LENGUAJE PARA LAS TRES: esta miniatura sale también dos veces en
   `funciones-widget-web`, y allí llevaba fondos lila y azul puestos en línea. Se
   han quitado: un color distinto por tarjeta se lee como una CATEGORÍA, y no lo
   es. El día que un negocio aporte una imagen real, la imagen sustituye al icono.
   Sin sombra, sin hover y sin degradado: no es pulsable y no debe parecerlo. */
.catalog-thumb {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center; box-sizing: border-box;
  border: 1px solid #e6dcfa; border-radius: 10px;
  background: #f4f1ff; color: #6d28d9;
}
.catalog-thumb svg {
  width: 19px; height: 19px; display: block;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pdm-card b { display: block; color: var(--ink); }
.pdm-card span { color: var(--muted); font-size: 11.5px; }
.pdm-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; }

/* Maqueta: calendario */
.pdm-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.pdm-cal .dh { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; text-align: center; padding: 3px 0; }
.pdm-cal .sl { height: 26px; border-radius: 7px; background: #f6f5fb; }
.pdm-cal .bk { display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.pdm-toast { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: #ecfdf3; color: #15803d; font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 9px 12px; }
.pdm-toast svg { width: 15px; height: 15px; flex: none; }

/* Maqueta: llamada */
.pdm-wave { display: flex; align-items: center; gap: 3px; height: 34px; margin-bottom: 12px; }
.pdm-wave i { width: 4px; border-radius: 3px; background: #c9b7f5; animation: pdwave 1.1s ease-in-out infinite; }
.pdm-wave i:nth-child(2n) { animation-delay: .15s; background: #a78bfa; }
.pdm-wave i:nth-child(3n) { animation-delay: .3s; }
@keyframes pdwave { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.pdm-tr { font-size: 12.5px; color: var(--ink-2); padding: 6px 0; border-top: 1px dashed #eef0f6; display: flex; gap: 8px; }
.pdm-tr b { color: var(--purple); flex: none; }
.pdm-sms { margin-top: 12px; background: #f2f4f9; border-radius: 12px; padding: 9px 12px; font-size: 12px; color: #1f2430; display: flex; gap: 8px; align-items: center; }
.pdm-sms svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* Maqueta: flujo */
.pdm-flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
.pdm-node { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid #eef0f6; border-radius: 12px; padding: 9px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink); box-shadow: 0 2px 10px rgba(15, 23, 42, .05); width: min(300px, 100%); }
.pdm-node .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.pdm-node .ic svg { width: 13px; height: 13px; }
.pdm-node small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.pdm-node.on { border-color: var(--lav); box-shadow: 0 0 0 4px rgba(177, 140, 247, .18); }
.pdm-link { width: 2px; height: 18px; background: #ddd6ee; }

/* Maqueta: campañas / análisis */
.pdm-bars { display: grid; gap: 10px; }
.pdm-bar { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }
.pdm-bar b { color: var(--ink); text-align: right; }
.pdm-bar .tr { height: 9px; border-radius: 6px; background: #f1eff8; overflow: hidden; }
.pdm-bar .fl { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #a78bfa, #6d28d9); width: var(--w, 50%); }
.pdm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pdm-kpi { background: #f8f7fc; border: 1px solid #eef0f6; border-radius: 11px; padding: 9px 11px; }
.pdm-kpi b { display: block; font-size: 17px; color: var(--ink); letter-spacing: -.02em; }
.pdm-kpi span { font-size: 10.5px; color: var(--muted); }
.pdm-kpi em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--green); margin-left: 4px; }

/* Banda "y mucho más" */
.pd-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.pd-more-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pd-more-card:hover { transform: translateY(-3px); border-color: var(--lav); box-shadow: 0 18px 40px -26px rgba(76, 29, 149, .3); }
.pd-more-card .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; margin-bottom: 10px; }
.pd-more-card .ic svg { width: 17px; height: 17px; }
.pd-more-card b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: 4px; }
.pd-more-card span { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ── PLAYGROUND: "habla con Cuho" (demo guiada sin backend) ─────────────── */
.pg { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; }
.pg-side h3 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.08; margin: 12px 0; color: var(--ink); }
.pg-side p { color: var(--muted); font-size: 16px; }
.pg-chat { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 40px 90px -38px rgba(35, 18, 79, .38); overflow: hidden; display: flex; flex-direction: column; height: 480px; }
.pg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef0f6; }
.pg-head .av { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pg-head b { display: block; font-size: 13.5px; color: var(--ink); }
/* NI VERDE NI PUNTO. Esto decia «En linea, responde al momento» en verde y con
   su bolita de conectado, y no hay ninguna conexion: las respuestas estan
   escritas a mano y no hay una sola peticion de red. El verde de «en linea» es
   una afirmacion, no una decoracion. Ahora dice lo que es —un negocio de
   ejemplo— y va en el gris de lo secundario. La regla del punto se queda
   escrita aunque ya no haya ningun `i` en el marcado: si alguien lo vuelve a
   poner, que no se pinte de verde por accidente. */
.pg-head span { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.pg-head span i { display: none; }
.pg-msgs { flex: 1; overflow-y: auto; padding: 16px; background: #f7f8fc; }
.pg-msg { max-width: 84%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; margin-bottom: 9px; animation: pgin .25s ease; }
@keyframes pgin { from { opacity: 0; transform: translateY(5px); } }
.pg-msg.me { background: #e7e0f8; color: #241a3d; margin-left: auto; border-bottom-right-radius: 4px; }
.pg-msg.bot { background: #fff; border: 1px solid rgba(0, 0, 0, .05); color: #1f2430; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.pg-typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 13px; border-bottom-left-radius: 4px; margin-bottom: 9px; }
.pg-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9b2d8; animation: pgdot 1s infinite; }
.pg-typing i:nth-child(2) { animation-delay: .18s; }
.pg-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes pgdot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid #eef0f6; background: #fff; }
.pg-chip { border: 1.5px solid var(--lav); color: var(--purple); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .15s, color .15s; }
.pg-chip:hover { background: var(--lav); color: var(--ink); }
.pg-input { display: flex; gap: 8px; padding: 10px 14px 14px; background: #fff; }
.pg-input input { flex: 1; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 13.5px; outline: 0; color: var(--ink); }
.pg-input input:focus { border-color: var(--purple); }
.pg-input button { border: 0; cursor: pointer; background: var(--ink); color: #fff; border-radius: 999px; width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.pg-input button svg { width: 17px; height: 17px; }

/* ── MURO DE INTEGRACIONES ──────────────────────────────────────────────────
   Era una rejilla de 7 columnas fijas: con un número de logos que no fuese
   múltiplo de 7, la última fila dejaba un hueco a la derecha que parecía un
   fallo. En fila flexible centrada, cualquier cantidad de logos queda
   compuesta — y así quitar uno no obliga a rellenar con lo que sea. */
.intg-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.intg {
  flex: 1 1 150px; max-width: 176px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 10px 14px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.intg:hover { transform: translateY(-3px); border-color: var(--lav); box-shadow: 0 16px 36px -24px rgba(76, 29, 149, .3); }
.intg .lg { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
/* El tamaño lo manda --k (ver `.lgm` en site.css): un porcentaje por marca,
   calculado para que todas pesen ópticamente lo mismo. */
.intg .lg svg { width: var(--k, 45%); height: var(--k, 45%); }
.intg b { font-size: 13px; color: var(--ink); }
.intg span { font-size: 10.5px; color: var(--muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pd-grid, .pg { grid-template-columns: 1fr; gap: 26px; }
  .pd-grid.pd-flip .pd-txt { order: 1; }
  .pd-grid.pd-flip .pd-shot { order: 2; }
  .pd-more { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .mk-hero h1 { font-size: clamp(38px, 10.5vw, 52px); }
  .mk-heromail { padding-left: 16px; }
  .mk-heromail button { padding: 12px 18px; font-size: 14.5px; }
  .mk-stat b { font-size: 56px; }
  .mk-topbar { flex-direction: column; gap: 2px; text-align: center; }
  .pd-more { grid-template-columns: 1fr; }
  .pg-chat { height: 430px; }
}
/* ── AUTH (login/register): limpieza al estilo actual ─────────────────────
   Fuera los restos del diseño antiguo que chocaban con el re-theme: fondo
   aurora, titular degradado y el búho. Tarjeta limpia sobre papel. */
body .sky { display: none !important; }
.au-main { background: transparent; }
.au-left h1 { color: var(--ink, #16181d); letter-spacing: -.03em; }
.au-left h1 .mk-grad-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ink, #16181d); }
.au-left > p { color: #565b66; }
.au-points li .ic { background: #efe9fc; color: #6d28d9; border-radius: 10px; }
.au-points li strong { color: var(--ink, #16181d); }
.au-points li span { color: var(--muted); }
/* LOS BORDES, DEL MISMO GRIS QUE EL RESTO. Eran beige (#e4e2dc, #d7d5cf), del
   papel cálido de antes: sobre el lavanda se veían amarillentos. */
.au-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 44px -28px rgb(22 24 29 / .25); }
.au-card h2 { color: var(--ink, #16181d); letter-spacing: -.02em; }
.au-card .lead { color: var(--muted); }
.au-card input { border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink, #16181d); }
.au-card input:focus { border-color: #b18cf7; box-shadow: 0 0 0 3px #efe9fc; outline: none; }
.au-card button[type="submit"], .au-card .mk-btn-primary {
  border-radius: 999px; background: var(--ink, #16181d); color: #fff; border: 0; font-weight: 700;
}
.au-card button[type="submit"]:hover { background: #2a2d35; }

/* Tarjeta de conversión dentro del chat de prueba: aparece cuando el visitante
   escribe SU pregunta (intención real), nunca con los chips de ejemplo. */
.pg-msg.cta {
  max-width: 100%;
  background: linear-gradient(135deg, #f5f1ff, #ede9fe);
  border: 1px solid #d8ccfb;
  color: #241a3d;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 15px;
  border-radius: 15px;
}
.pg-msg.cta b { font-size: 13.5px; }
.pg-msg.cta span { font-size: 12.8px; line-height: 1.55; color: #4b3f6b; }
.pg-cta-btn {
  align-self: flex-start;
  margin-top: 3px;
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .32);
  transition: transform .15s, box-shadow .15s;
}
.pg-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124, 58, 237, .42); }

/* ── Capacidades: filas editoriales desplegables ──────────────────────────
   Sustituyen a la rejilla de seis tarjetas iguales, que daba aspecto de
   plantilla generada. Sin cajas: número grande, hilo fino y despliegue. */
/* .bento es una rejilla de 12 columnas (venía de las tarjetas): sin esto la
   lista caería en una sola columna, 1/12 del ancho. */
.cap-list { grid-column: 1 / -1; border-top: 1px solid #e7e9f2; margin-top: 34px; }
.cap-row { border-bottom: 1px solid #e7e9f2; }
.cap-head {
  width: 100%; display: grid; grid-template-columns: 62px 1fr 30px;
  align-items: start; gap: 18px; padding: 26px 6px; background: none;
  border: 0; font-family: inherit; text-align: left; cursor: pointer;
  transition: background .18s;
}
.cap-head:hover { background: #faf9ff; }
.cap-n {
  font-size: 26px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 2px;
}
.cap-tx { min-width: 0; }
.cap-tx h3 { font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; color: #171a21; margin: 0 0 7px; letter-spacing: -.01em; }
.cap-tx p { font-size: 14.5px; line-height: 1.62; color: #5b6274; margin: 0; max-width: 74ch; }
.cap-chev { color: #a9b0c2; display: grid; place-items: center; padding-top: 4px; transition: transform .25s, color .18s; }
.cap-chev svg { width: 20px; height: 20px; }
.cap-row.is-open .cap-chev { transform: rotate(180deg); color: #7c3aed; }
/* Se desplegaba con `grid-template-rows: 0fr → 1fr`, que es elegante pero
   frágil: la transición se quedaba en marcha sin avanzar nunca y la fila
   crecía solo lo que ocupaba el padding (26px de 161). Con max-height es
   menos fino pero funciona siempre; el techo va holgado para no recortar. */
.cap-body { overflow: hidden; max-height: 0; transition: max-height .32s ease; }
.cap-row.is-open .cap-body { max-height: 460px; }
.cap-list-in { margin: 0; padding: 0 6px 0 80px; list-style: none; }
.cap-row.is-open .cap-list-in { padding-bottom: 26px; }
.cap-list-in li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: #4b5264; padding: 7px 0; }
.cap-list-in .ck { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #ede9fe; color: #7c3aed; display: grid; place-items: center; margin-top: 1px; }
.cap-list-in .ck svg { width: 11px; height: 11px; }

/* ── Lista de especificaciones («y esto sigue») ───────────────────────────
   Dos columnas con hilo fino, sin tarjetas: se lee como una ficha técnica. */
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; margin-top: 26px; }
.spec { padding: 17px 0; border-bottom: 1px solid #e9ebf3; }
.spec b { display: block; font-size: 15px; font-weight: 700; color: #171a21; margin-bottom: 4px; }
.spec span { font-size: 13.8px; line-height: 1.6; color: #5b6274; }

@media (max-width: 1100px) {
  .kx-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cap-head { grid-template-columns: 42px 1fr 24px; gap: 13px; padding: 21px 2px; }
  .cap-n { font-size: 20px; }
  .cap-list-in { padding-left: 55px; }
  .spec-list { grid-template-columns: 1fr; gap: 0; }
}

/* Titulo de grupo dentro de una ficha tecnica (tipos de promocion). */
.grp-t {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: #7c3aed; margin: 30px 0 6px; padding-top: 4px;
}
.grp-t:first-of-type { margin-top: 10px; }
.spec-list + .grp-t { margin-top: 34px; }


/* ── Menú desplegable de la barra («Funciones») · tema claro ──────────────
   El layout vive en site.css; aquí solo el color, igual que el resto de la
   hoja. Se abre con :hover y :focus-within — sin JavaScript. */
.mk-nav-links .mk-nav-drop-t { color: var(--ink-2); font-weight: 600; }
.mk-nav-drop:hover .mk-nav-drop-t,
.mk-nav-drop:focus-within .mk-nav-drop-t,
.mk-nav-links .mk-nav-drop-t.is-active { color: var(--ink); }
.mk-nav-drop-menu {
  background: #fff; border-color: var(--line);
  box-shadow: 0 28px 64px -28px rgba(22, 24, 29, .35), 0 2px 8px rgba(22, 24, 29, .05);
}
.mk-nav-links .mk-nav-drop-menu a b { color: var(--ink); }
.mk-nav-links .mk-nav-drop-menu a span { color: var(--muted); }
.mk-nav-links .mk-nav-drop-menu a:hover { background: #f5f1ff; }
.mk-nav-links .mk-nav-drop-menu a:hover b { color: var(--purple); }

/* El megamenú de «Producto», en claro.
   El cuadro del icono venía con un blanco al 6 % —pensado para el fondo oscuro
   de site.css— y sobre el panel BLANCO de esta hoja era blanco sobre blanco:
   se veía el borde y nada más. Aquí se le pone el mismo gris lavanda que usan
   las pastillas de canal. */
.mk-nav-col a .ic { background: #f4f2fa; border-color: var(--line); color: var(--purple); }
.mk-nav-links .mk-nav-col a:hover .ic { background: #e9e0fb; color: var(--purple); }
.mk-nav-col h6 { color: var(--muted); }
.mk-nav-col--hero { border-right-color: var(--line); }
.mk-nav-mega-foot { border-top-color: var(--line); }
.mk-nav-mega-foot p { color: var(--ink-2); }
.mk-nav-mega-art { color: var(--purple); }

/* Menú móvil: las separaciones eran un blanco al 5 %, invisible sobre el panel
   claro. Con el acordeón dentro se notaba todavía más, porque sin líneas los
   diecisiete enlaces son un bloque de texto sin forma. */
.mk-mobile-menu a,
.mk-mobile-menu .mk-mm-head { border-bottom-color: var(--line); }
.mk-mobile-menu .mk-mm-head { color: var(--ink); }
.mk-mobile-menu .mk-mm-panel a,
.mk-mobile-menu .mk-mm-panel a:last-child { color: var(--muted); border-bottom-color: var(--line); }
.mk-mm-panel h6 { color: var(--muted); }

/* ══ TODO TU NEGOCIO CONECTADO ═══════════════════════════════════════════════
   Sustituye a la lista desplegable de capacidades: aquella obligaba a abrir
   seis filas para saber qué había dentro; esto se lee de un vistazo. */
.tnc { grid-column: 1 / -1; margin-top: 30px; }
.tnc-head { text-align: center; margin-bottom: 26px; }
.tnc-head h2 { font-family: var(--font-display, inherit); font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; color: #171a21; letter-spacing: -.02em; margin: 0 0 8px; }
.tnc-head p { font-size: 15px; color: #5b6274; margin: 0; }

.tnc-piezas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.tnc-pieza { background: #fff; border: 1px solid #e9ebf3; border-radius: 15px; padding: 17px 13px; text-align: center; transition: border-color .16s, transform .16s, box-shadow .16s; }
.tnc-pieza:hover { border-color: #d6ccff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(109, 40, 217, .08); }
.tnc-pieza-ic { width: 38px; height: 38px; border-radius: 11px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; margin: 0 auto 10px; }
.tnc-pieza-ic svg { width: 19px; height: 19px; }
.tnc-pieza h3 { font-size: 13.5px; font-weight: 700; color: #171a21; margin: 0 0 5px; }
.tnc-pieza p { font-size: 11.5px; line-height: 1.45; color: #77809a; margin: 0; }

.tnc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tnc-card { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; }
.tnc-card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.tnc-num { flex: none; width: 27px; height: 27px; border-radius: 9px; background: #6d28d9; color: #fff; font-size: 13.5px; font-weight: 700; display: grid; place-items: center; }
.tnc-card-h h3 { font-size: 18px; font-weight: 700; color: #171a21; margin: 0; letter-spacing: -.01em; }
.tnc-card-p { font-size: 13.5px; line-height: 1.55; color: #5b6274; margin: 0 0 15px; }
.tnc-mock { background: #fff; border: 1px solid #e9ebf3; border-radius: 14px; padding: 13px; flex: 1; box-shadow: 0 4px 16px rgba(23, 26, 33, .04); }
.tnc-mock-t { font-size: 12.5px; font-weight: 700; color: #171a21; padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px solid #f0f1f7; }

.tnc-chat { display: flex; flex-direction: column; gap: 8px; }
.tnc-msg { align-self: flex-start; max-width: 92%; background: #f4f5f9; border-radius: 11px; padding: 8px 11px; font-size: 12px; line-height: 1.45; color: #3d4356; }
.tnc-msg time { display: block; font-size: 10px; color: #a2aabd; margin-top: 3px; }
.tnc-msg--out { align-self: flex-end; background: #6d28d9; color: #fff; }
.tnc-msg--out time { color: rgba(255,255,255,.7); text-align: right; }
.tnc-src { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #64748b; background: #f7fbf8; border: 1px solid #dcf0e3; border-radius: 9px; padding: 7px 10px; margin-top: 3px; }
.tnc-src--ok { background: #f2fbf5; border-color: #cfeddb; color: #15803d; font-weight: 600; margin-top: 11px; }
.tnc-ok { flex: none; width: 15px; height: 15px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.tnc-ok svg { width: 9px; height: 9px; }

.tnc-ct-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tnc-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #6d28d9); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.tnc-ct-id { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.tnc-ct-id strong { font-size: 13.5px; color: #171a21; }
.tnc-ct-id small, .tnc-ct-tel { font-size: 11px; color: #8b93a8; }
.tnc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tnc-tag { font-size: 10.5px; font-weight: 600; color: #64748b; background: #f4f5f9; border-radius: 999px; padding: 3px 9px; }
.tnc-tag--p { background: #ede9fe; color: #6d28d9; }
.tnc-tag--a { background: #fef3c7; color: #b45309; }
.tnc-tabs { display: flex; gap: 14px; border-bottom: 1px solid #f0f1f7; margin-bottom: 9px; }
.tnc-tabs span { font-size: 11.5px; font-weight: 600; color: #9aa2b6; padding-bottom: 7px; border-bottom: 2px solid transparent; }
.tnc-tabs .is-on { color: #6d28d9; border-bottom-color: #6d28d9; }
.tnc-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tnc-hist li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 3px 7px; align-items: center; font-size: 11.5px; }
.tnc-hist b { color: #171a21; font-weight: 650; }
.tnc-hist span { color: #77809a; grid-column: 2 / -1; }
.tnc-hist time { grid-row: 1; grid-column: 3; justify-self: end; font-size: 10.5px; color: #a2aabd; }
.tnc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); grid-row: 1; }

.tnc-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa2b6; margin: 12px 0 6px; }
.tnc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tnc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #3d4356; background: #fff; border: 1px solid #e6e8f0; border-radius: 8px; padding: 5px 9px; }
.tnc-chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.tnc-seg { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #e6e8f0; border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: #171a21; }
.tnc-seg small { font-size: 10.5px; font-weight: 500; color: #9aa2b6; }
.tnc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.tnc-kpi { background: #f8f8fc; border-radius: 9px; padding: 8px; text-align: center; }
.tnc-kpi small { display: block; font-size: 10px; color: #9aa2b6; margin-bottom: 2px; }
.tnc-kpi strong { display: block; font-size: 14px; color: #171a21; }
.tnc-kpi em { font-style: normal; font-size: 10px; color: #16a34a; font-weight: 600; }
.tnc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f1f7; font-size: 11.5px; color: #64748b; }
.tnc-pill { font-size: 10.5px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 3px 10px; }

.tnc-res { border: 1px solid #e6e8f0; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; }
.tnc-res strong { font-size: 13px; color: #171a21; }
.tnc-res small { font-size: 11.5px; color: #77809a; display: flex; align-items: center; gap: 6px; }
.tnc-res small svg { width: 13px; height: 13px; flex: none; }

.tnc-flow { list-style: none; margin: 0; padding: 0; }
.tnc-flow li { display: flex; align-items: center; gap: 10px; border: 1px solid #e6e8f0; border-radius: 10px; padding: 8px 10px; background: #fff; }
/* La flecha entre pasos va en el HUECO, para que la secuencia se lea como una
   secuencia y no como cuatro fichas sueltas. */
.tnc-flow li + li { margin-top: 20px; position: relative; }
.tnc-flow li + li::before { content: ''; position: absolute; left: 50%; top: -16px; width: 1px; height: 12px; background: #d7dbe8; }
.tnc-flow li + li::after { content: ''; position: absolute; left: 50%; top: -7px; width: 5px; height: 5px; border-right: 1.5px solid #b9c0d2; border-bottom: 1.5px solid #b9c0d2; transform: translateX(-50%) rotate(45deg); }
.tnc-fic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); display: grid; place-items: center; }
.tnc-fic svg { width: 15px; height: 15px; }
.tnc-flow b { display: block; font-size: 12px; color: #171a21; font-weight: 650; }
.tnc-flow small { font-size: 10.5px; color: #9aa2b6; }

.tnc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tnc-stat { background: #f8f8fc; border-radius: 11px; padding: 10px 11px; display: flex; flex-direction: column; gap: 1px; }
.tnc-stat strong { font-size: 17px; color: #171a21; letter-spacing: -.01em; }
.tnc-stat small { font-size: 10.5px; color: #9aa2b6; }
.tnc-stat em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #16a34a; }
.tnc-stat--wide { margin-top: 8px; }
.tnc-spark { width: 100%; height: 62px; margin-top: 10px; display: block; }

.tnc-nota { text-align: center; font-size: 12px; color: #98a0b3; margin: 18px 0 0; }

@media (max-width: 1080px) {
  .tnc-piezas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tnc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── LAS SEIS DEMOSTRACIONES, EN CARRUSEL A PARTIR DE 720 ────────────────────
   Apiladas una debajo de otra medían 2.819 px en un teléfono: casi tres mil
   píxeles de scroll para seis tarjetas, en una página que mide 21.424. Y no
   sobra ninguna — cada una lleva dentro una pantalla del producto con datos de
   verdad, que es lo único que demuestra lo que hace la herramienta.
   Se pasan a un carrusel NATIVO: sin JavaScript, sin flechas, sin puntitos y sin
   reproducción automática. Se desliza con el dedo, como en cualquier aplicación.

   LAS TARJETAS SE DECLARAN VISIBLES A PROPÓSITO. Las seis llevan `.reveal`, que
   las tiene a `opacity: 0` hasta que el `IntersectionObserver` de `site-nav.js`
   (raíz: el viewport, umbral 0,12) las da por vistas. Dentro de un carrusel
   horizontal, las que están desplazadas fuera las recorta el `overflow` de este
   contenedor y NO intersecan: se quedarían ahí, ocupando su sitio, invisibles, y
   sin dar ningún error. Aquí no se depende de ese observador.

   EL SCROLL ES DE ESTE CONTENEDOR, y ningún ancestro lleva `overflow`. Hace
   falta que sea suyo justamente porque el `body` recorta el desbordamiento
   horizontal del viewport: sin un `overflow-x` propio, lo que se saliera quedaría
   cortado y no habría forma de alcanzarlo. */
@media (max-width: 720px) {
  .tnc-piezas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* `min-width: 0` NO ES ADORNO, es lo que hace que esto se DESPLACE en vez de
     ENSANCHARSE. `.tnc` es un ítem de la rejilla `.bento`, y un ítem de rejilla
     nace con `min-width: auto`: no baja de su contenido mínimo. Con las seis
     tarjetas en fila eso son 1.316 px, así que la pista crecía hasta 1.316 dentro
     de un teléfono de 342 y el `overflow-x: auto` no llegaba a tener nada que
     desplazar. Y no se veía: el `overflow-x: hidden` del `body` recortaba el
     sobrante, así que la pantalla quedaba igual de bien y las cinco tarjetas de
     la derecha eran inalcanzables. Medido: sin esto, 1.316 de ancho; con esto,
     342 y el scroll dentro. */
  .tnc { min-width: 0; }
  .tnc-cards {
    min-width: 0;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tnc-cards::-webkit-scrollbar { display: none; }

  /* 86 % y no 100: el 14 % que queda es el borde de la siguiente asomando, que
     es lo que dice «esto se desliza» sin tener que poner una flecha. */
  .tnc-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .tnc-card.reveal { opacity: 1; transform: none; transition: none; }

  /* Espacio final suficiente para que la sexta también pueda hacer snap con su
     borde izquierdo donde hicieron snap las demás. Sin esto, la última se queda
     pegada al final y su alineación no coincide con la de las otras cinco. */
  .tnc-cards::after {
    content: '';
    flex: 0 0 calc(14% - 14px);
  }

  /* CADA TARJETA ACABA DONDE ACABA SU CONTENIDO. Dos cosas la estiraban a la vez:
     el carrusel es un flex y `align-items` vale `stretch` por defecto, así que
     las seis se igualaban a la más alta; y dentro de cada tarjeta la maqueta
     lleva `flex: 1`, así que era ELLA la que se tragaba el sobrante. El hueco
     quedaba por tanto DENTRO del rectángulo blanco, y eso no se lee como aire de
     maqueta: se lee como contenido que falta.
     La pista del carrusel sigue midiendo lo que mida la más alta —eso es
     correcto, la altura no puede saltar al deslizar—, pero debajo de una tarjeta
     corta ahora hay fondo de la sección, no un rectángulo vacío. */
  .tnc-cards { align-items: flex-start; }
  .tnc-mock { flex: none; }
}

/* ══ CANALES E INTEGRACIONES, EN UNA SOLA SECCIÓN ════════════════════════════
   Antes eran dos que contaban lo mismo y repetían los mismos logos. */
.cn-panel { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 26px; padding: clamp(24px, 4vw, 46px); }
.cn-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 26px; }

.cn-orbita { position: relative; display: flex; flex-direction: column; gap: 26px; align-items: center; }
/* El resplandor es lo único que se dibuja «entre» las tarjetas, y va anclado al
   centro: por mucho que cambie el ancho, no se puede desalinear. */
.cn-orbita::before { content: ''; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 68%); pointer-events: none; }
.cn-fila { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; position: relative; z-index: 1; }
.cn-fila--lados { gap: 160px; }
.cn-cd { background: #fff; border: 1px solid #e9ebf3; border-radius: 15px; padding: 13px 14px; min-width: 116px; display: flex; flex-direction: column; align-items: center; gap: 7px; box-shadow: 0 4px 16px rgba(23, 26, 33, .05); transition: transform .16s, border-color .16s; }
.cn-cd:hover { transform: translateY(-2px); border-color: #d6ccff; }
.cn-lg { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.cn-lg svg { width: 24px; height: 24px; }
.cn-cd b { font-size: 12.5px; color: #171a21; font-weight: 650; text-align: center; }
.cn-et { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: #f4f5f9; color: #64748b; }
.cn-et--msg { background: #eaf9f0; color: #15803d; }
.cn-et--ct { background: #fdeef2; color: #be185d; }
.cn-et--ll { background: #e8f4fe; color: #0369a1; }
.cn-et--pd { background: #eefbe7; color: #4d7c0f; }
.cn-et--rs { background: #eef2ff; color: #4338ca; }
.cn-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; background: #fff; border: 1px solid #e6ddff; color: #6d28d9; display: grid; place-items: center; box-shadow: 0 10px 34px rgba(109, 40, 217, .2); z-index: 2; }
.cn-hub svg { width: 38px; height: 38px; }
/* El logotipo trae su propio fondo blanco redondeado, que se funde con el del
   círculo; lo que se lee es la burbuja. Va algo mayor que el icono de trazo que
   había (38) porque el suyo es un dibujo lleno y no una línea. */
.cn-hub img { width: 52px; height: 52px; display: block; }

.cn-lat { background: #fff; border: 1px solid #ece9f8; border-radius: 18px; padding: 20px; }
.cn-lat h3 { font-size: 17px; font-weight: 700; color: #6d28d9; margin: 0 0 14px; }
.cn-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cn-lista li { display: flex; gap: 11px; align-items: flex-start; }
.cn-lic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.cn-lic svg { width: 16px; height: 16px; }
.cn-lista b { display: block; font-size: 13px; color: #171a21; font-weight: 650; margin-bottom: 2px; }
.cn-lista small { font-size: 11.5px; line-height: 1.45; color: #77809a; }

.cn-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 26px; }
.cn-cta-btn { display: inline-flex; align-items: center; gap: 9px; }
.cn-cta-btn svg { width: 17px; height: 17px; }
.cn-cta-nota { display: flex; align-items: center; gap: 11px; }
.cn-cta-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.cn-cta-ic svg { width: 18px; height: 18px; }
.cn-cta-nota b { display: block; font-size: 13.5px; color: #171a21; }
.cn-cta-nota small { font-size: 12px; color: #77809a; }

.cn-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 13px; padding: 13px 16px; }
.cn-seg-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #6d28d9; color: #fff; display: grid; place-items: center; }
.cn-seg-ic svg { width: 14px; height: 14px; }
.cn-seg b { font-size: 13px; color: #171a21; }
.cn-seg > span:last-child { font-size: 12.5px; color: #77809a; }

@media (max-width: 980px) {
  .cn-grid { grid-template-columns: minmax(0, 1fr); }
  .cn-fila--lados { gap: 14px; }
  /* Sin sitio para rodearlo, el centro deja de ser un centro: pasa a ser una
     tarjeta más arriba del todo en vez de taparse con las demás. */
  .cn-hub { position: static; transform: none; margin: 0 auto; }
  .cn-orbita::before { display: none; }
}

/* ══ PÁGINA CANALES E INTEGRACIONES ══════════════════════════════════════════
   Antes era una lista de secciones por familia y había que bajar toda la
   página para comparar dos canales. Ahora es un panel: filtras, eliges, y ves
   al lado qué recoge Cuho de ese canal. */
/* LOS 140 PX SON PARA LA TEXTURA. `.mk-hero::after` pinta las barritas
   verticales de la casa en los últimos 130 px del banner, y con 6 px de aire
   caían justo encima de «Configuración en minutos · Sin tarjeta de crédito ·
   Soporte en español»: tres renglones de texto sobre unas rayas moradas, que
   se lee como una pantalla rota. El banner acaba en 730 y la banda empieza en
   600; el último renglón está en 584. */
.cx-hero { padding-bottom: 140px; }
.cx-hero-in { text-align: center; max-width: 840px; margin: 0 auto; }
.cx-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 999px; padding: 6px 15px; margin-bottom: 18px; }
.cx-hero-in h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.cx-hero-sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: #5b6274; margin: 0 auto 26px; max-width: 660px; }
.cx-micros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-micro { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid #e9ebf3; border-radius: 13px; padding: 12px 14px; }
.cx-micro-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.cx-micro-ic svg { width: 16px; height: 16px; }
.cx-micro b { display: block; font-size: 12.5px; color: #171a21; }
.cx-micro small { font-size: 11.5px; color: #8b93a8; }

.cx-panel { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 24px; padding: clamp(18px, 2.6vw, 28px); }
.cx-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.cx-filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.cx-f { border: 1px solid #e6e8f0; background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: #5b6274; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.cx-f:hover { border-color: #c4b5fd; background: #faf8ff; }
.cx-f.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }

.cx-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.cx-cd { text-align: left; background: #fff; border: 1.5px solid #e9ebf3; border-radius: 14px; padding: 13px; cursor: pointer; transition: border-color .14s, box-shadow .14s, transform .14s; display: flex; flex-direction: column; gap: 10px; }
.cx-cd:hover { border-color: #d6ccff; transform: translateY(-2px); }
.cx-cd.is-sel { border-color: #6d28d9; box-shadow: 0 8px 26px rgba(109, 40, 217, .14); }
.cx-cd-h { display: flex; align-items: center; gap: 9px; }
.cx-lg { flex: none; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.cx-cd-n { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cx-cd-n b { font-size: 12.5px; color: #171a21; font-weight: 650; }
.cx-cd-n small { font-size: 10.5px; color: #8b93a8; }
.cx-tick { flex: none; width: 19px; height: 19px; border-radius: 50%; background: #6d28d9; color: #fff; display: grid; place-items: center; }
.cx-tick svg { width: 10px; height: 10px; }
.cx-cd-caps { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-cd-caps i { font-style: normal; font-size: 10px; font-weight: 600; color: #6b7280; background: #f4f5f9; border-radius: 5px; padding: 3px 7px; }
.cx-vacio { font-size: 13px; color: #8b93a8; margin: 16px 0 0; }

.cx-der { background: #fff; border: 1px solid #ece9f8; border-radius: 18px; padding: 18px; position: sticky; top: 90px; }
.cx-det-h { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #f0f1f7; margin-bottom: 14px; }
.cx-det-lg { flex: none; width: 38px; height: 38px; border-radius: 11px; color: #fff; font-size: 17px; font-weight: 700; display: grid; place-items: center; }
.cx-det-id { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cx-det-id b { font-size: 15px; color: #171a21; }
.cx-det-id small { font-size: 11.5px; color: #8b93a8; }
.cx-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 4px 10px; }
.cx-estado i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }

.cx-chat { display: flex; flex-direction: column; gap: 8px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 13px; padding: 12px; }
.cx-m { align-self: flex-start; max-width: 90%; background: #fff; border: 1px solid #eceef5; border-radius: 11px; padding: 8px 11px; font-size: 12px; line-height: 1.45; color: #3d4356; }
.cx-m time { display: block; font-size: 10px; color: #a2aabd; margin-top: 3px; }
.cx-m--out { align-self: flex-end; background: #6d28d9; border-color: #6d28d9; color: #fff; }
.cx-m--out time { color: rgba(255,255,255,.72); text-align: right; }
.cx-m--ok { align-self: stretch; max-width: none; background: #f2fbf5; border-color: #cfeddb; color: #15803d; font-weight: 600; }
.cx-m--ok time { color: #6ba985; }

.cx-det-h3 { font-size: 13.5px; font-weight: 700; color: #171a21; margin: 16px 0 10px; }
.cx-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-caps li { display: flex; gap: 10px; align-items: flex-start; }
.cx-cap-ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.cx-cap-ic svg { width: 12px; height: 12px; }
.cx-caps b { display: block; font-size: 12.5px; color: #171a21; font-weight: 650; }
.cx-caps small { font-size: 11.5px; line-height: 1.45; color: #77809a; }

.cx-vent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cx-vent-c { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.cx-vent-ic { width: 38px; height: 38px; border-radius: 11px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; margin-bottom: 12px; }
.cx-vent-ic svg { width: 19px; height: 19px; }
.cx-vent-c h3 { font-size: 14.5px; font-weight: 700; color: #171a21; margin: 0 0 6px; }
.cx-vent-c p { font-size: 12.5px; line-height: 1.55; color: #5b6274; margin: 0; }

.cx-suma { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 18px; align-items: center; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 20px; padding: 20px 24px; }
.cx-suma-ic { width: 46px; height: 46px; border-radius: 13px; background: #fff; color: #6d28d9; display: grid; place-items: center; }
.cx-suma-ic svg { width: 22px; height: 22px; }
.cx-suma-tx b { display: block; font-size: 16px; color: #171a21; margin-bottom: 3px; }
.cx-suma-tx span { font-size: 13px; line-height: 1.55; color: #5b6274; }
.cx-suma-eq { display: flex; align-items: center; gap: 7px; }
.cx-eq-lg { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.cx-eq-lg svg { width: 20px; height: 20px; }
.cx-eq-cuho { background: #6d28d9; color: #fff; }
.cx-suma-eq i { font-style: normal; font-size: 14px; font-weight: 700; color: #a89bd0; }
.cx-suma-eq .cx-eq-ig { font-size: 17px; color: #6d28d9; }

.cx-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 30px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
.cx-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.cx-cta-tx p { font-size: 14px; margin: 0; color: rgba(255,255,255,.86); }
.cx-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cx-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.cx-cta-btn svg { width: 17px; height: 17px; }
.cx-cta-form small { font-size: 11.5px; color: rgba(255,255,255,.78); }

@media (max-width: 1080px) {
  .cx-cols { grid-template-columns: minmax(0, 1fr); }
  .cx-der { position: static; }
  .cx-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-vent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-suma { grid-template-columns: auto minmax(0, 1fr); }
  .cx-suma-eq { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .cx-micros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-rejilla { grid-template-columns: minmax(0, 1fr); }
  .cx-vent { grid-template-columns: minmax(0, 1fr); }
  .cx-cta { grid-template-columns: minmax(0, 1fr); }
  .cx-cta-form { align-items: stretch; }
}

/* ══ PÁGINA «CONFIGURA TU NEGOCIO» ═══════════════════════════════════════════
   Reúne en un sitio todo lo que hay que enseñarle a Cuho. Barra lateral con el
   índice y once tarjetas, cada una con su pantalla y su enlace. */
.cfg { padding: 26px 0 80px; }
.cfg-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; }

.cfg-lat { position: sticky; top: 88px; }
.cfg-lat-h { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9aa2b6; margin: 0 0 12px 12px; }
.cfg-nav { display: flex; flex-direction: column; gap: 2px; }
.cfg-n { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #5b6274; text-decoration: none; transition: background .14s, color .14s; }
.cfg-n:hover { background: #f6f5fc; color: #171a21; }
.cfg-n.is-on { background: #f0ecff; color: #6d28d9; }
.cfg-n-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: inherit; }
.cfg-n-ic svg { width: 17px; height: 17px; }
.cfg-ayuda { margin-top: 22px; background: #fbfaff; border: 1px solid #ece9f8; border-radius: 15px; padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.cfg-ayuda b { font-size: 13px; color: #171a21; }
.cfg-ayuda span { font-size: 11.5px; line-height: 1.5; color: #77809a; }
.cfg-ayuda-btn { align-self: flex-start; margin-top: 4px; background: #6d28d9; color: #fff; text-decoration: none; font-size: 12px; font-weight: 650; border-radius: 9px; padding: 7px 13px; }

.cfg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 26px; align-items: start; margin-bottom: 26px; }
.cfg-head h1 { font-family: var(--font-display, inherit); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.12; margin: 0 0 10px; }
.cfg-head p { font-size: 14.5px; line-height: 1.6; color: #5b6274; margin: 0; max-width: 56ch; }
.cfg-head-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cfg-head-cta small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8b93a8; }
.cfg-head-cta small svg { width: 14px; height: 14px; }

.cfg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cfg-c { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; }
.cfg-c--ancha { grid-column: span 2; }
.cfg-c-h { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.cfg-c-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; }
.cfg-c-ic svg { width: 17px; height: 17px; }
.cfg-c-h h2 { font-size: 16px; font-weight: 700; color: #171a21; margin: 0; letter-spacing: -.01em; }
.cfg-c > p { font-size: 12.5px; line-height: 1.55; color: #77809a; margin: 0 0 13px; }
.cfg-mk { background: #fbfaff; border: 1px solid #f0eefb; border-radius: 13px; padding: 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.cfg-fila { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 10px; }
.cfg-fila--simple { justify-content: space-between; }
.cfg-mini { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--c); }
.cfg-fila > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cfg-fila b { font-size: 12px; color: #171a21; font-weight: 650; }
.cfg-fila small { font-size: 10.5px; }
.cfg-fila small.ok { color: #16a34a; }
.cfg-fila small.bajo { color: #d97706; }
.cfg-fila em { font-style: normal; font-size: 12px; font-weight: 700; color: #171a21; }

.cfg-srv { display: flex; gap: 10px; background: #fff; border: 1px solid #eceef5; border-radius: 10px; padding: 11px; }
.cfg-srv-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #ede9fe; color: #6d28d9; display: grid; place-items: center; }
.cfg-srv-ic svg { width: 17px; height: 17px; }
.cfg-srv b { display: block; font-size: 12.5px; color: #171a21; }
.cfg-srv small { display: block; font-size: 11px; color: #9aa2b6; }
.cfg-srv strong { display: block; font-size: 13px; color: #171a21; margin: 2px 0 6px; }
.cfg-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cfg-tags i { font-style: normal; font-size: 10px; font-weight: 600; color: #4338ca; background: #eef2ff; border-radius: 5px; padding: 3px 7px; }
.cfg-tags i.pop { color: #be185d; background: #fdeef2; }

.cfg-sede { display: flex; align-items: center; gap: 9px; }
.cfg-pin { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #ecfdf5; position: relative; }
.cfg-pin::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid #059669; }
.cfg-sede b { display: block; font-size: 12px; color: #171a21; font-weight: 650; }
.cfg-sede small { font-size: 10.5px; color: #9aa2b6; }

.cfg-tick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #3d4356; }
.cfg-ok { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.cfg-ok svg { width: 9px; height: 9px; }

.cfg-sw { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 10px; font-size: 12px; color: #3d4356; }
.cfg-sw i { flex: none; width: 30px; height: 17px; border-radius: 999px; background: #dfe3ec; position: relative; }
.cfg-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .16s; }
.cfg-sw i.on { background: #6d28d9; }
.cfg-sw i.on::after { transform: translateX(13px); }

.cfg-per { display: flex; align-items: center; gap: 9px; }
.cfg-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #6d28d9); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.cfg-per b { display: block; font-size: 12px; color: #171a21; font-weight: 650; }
.cfg-per small { font-size: 10.5px; color: #9aa2b6; }

.cfg-dato { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #5b6274; background: #fff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 10px; }
.cfg-dato b { color: #171a21; font-weight: 700; }

.cfg-sem-h { font-size: 11.5px; font-weight: 650; color: #5b6274; }
.cfg-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cfg-dia { background: #fff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 92px; }
.cfg-dia b { font-size: 10.5px; color: #171a21; }
.cfg-dia small { font-size: 9.5px; color: #9aa2b6; margin-bottom: 3px; }
.cfg-dia i { width: 100%; height: 7px; border-radius: 3px; background: var(--c); }
.cfg-ley { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.cfg-ley span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #77809a; }
.cfg-ley i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.cfg-ver { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; font-size: 12.5px; font-weight: 650; color: #6d28d9; text-decoration: none; }
.cfg-ver svg { width: 14px; height: 14px; }
.cfg-ver:hover { text-decoration: underline; }

.cfg-nota { text-align: center; font-size: 12px; color: #98a0b3; margin: 20px 0 0; }

.cfg-fin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; margin-top: 20px; background: #fbfaff; border: 1px solid #ece9f8; border-radius: 18px; padding: 20px 24px; }
.cfg-fin-ic { width: 42px; height: 42px; border-radius: 12px; background: #f0ecff; color: #6d28d9; display: grid; place-items: center; }
.cfg-fin-ic svg { width: 21px; height: 21px; }
.cfg-fin-tx b { display: block; font-size: 15px; color: #171a21; margin-bottom: 3px; }
.cfg-fin-tx span { font-size: 12.5px; line-height: 1.5; color: #77809a; }

@media (max-width: 1080px) {
  .cfg-wrap { grid-template-columns: minmax(0, 1fr); }
  .cfg-lat { position: static; }
  .cfg-nav { flex-direction: row; flex-wrap: wrap; }
  .cfg-n { border: 1px solid #eceef5; }
  .cfg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cfg-cards, .cfg-c--ancha { grid-template-columns: minmax(0, 1fr); grid-column: auto; }
  .cfg-head { grid-template-columns: minmax(0, 1fr); }
  .cfg-head-cta { align-items: flex-start; }
  .cfg-fin { grid-template-columns: minmax(0, 1fr); }
  .cfg-sem { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══ PÁGINA «CAMPAÑAS» ═══════════════════════════════════════════════════════
   Antes «Campañas» era un ancla de la portada y no había dónde contar el
   recorrido entero. Aquí van el hero con la pantalla de «Nueva campaña», seis
   piezas, y los cinco bloques A–E: segmentar, canal, plantillas, medir y la
   cadena contacto → resultado. Cada bloque es texto a la izquierda y su
   pantalla a la derecha. */
.cp-hero { padding-bottom: 4px; }
.cp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 34px 40px; align-items: center; }
.cp-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 16px; }
.cp-hero-tx h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 3.9vw, 50px); font-weight: 800; color: #171a21; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 14px; }
.cp-hero-sub { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.62; color: #5b6274; margin: 0 0 24px; max-width: 54ch; }
.cp-hero-cta { display: flex; flex-wrap: wrap; gap: 11px; }
.cp-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; }
.cp-ticks li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #5b6274; }
.cp-tk { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.cp-tk svg { width: 9px; height: 9px; }

/* La pantalla «Nueva campaña»: el formulario a la izquierda, la vista previa
   y la estimación a la derecha. */
.cp-hero-mk { background: #fff; border: 1px solid #e9ebf3; border-radius: 20px; box-shadow: 0 26px 60px -34px rgba(76, 29, 149, .35); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.cp-mk-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #f0f1f7; }
.cp-mk-h b { font-size: 13.5px; color: #171a21; }
.cp-pill-est { font-size: 10.5px; font-weight: 700; color: #77809a; background: #f4f5f9; border-radius: 999px; padding: 4px 10px; }
.cp-pill-est--on { color: #15803d; background: #dcfce7; }
.cp-mk-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; border-right: 1px solid #f0f1f7; }
.cp-mk-side { padding: 14px 16px; background: #fbfaff; display: flex; flex-direction: column; gap: 12px; }

.cp-campo { display: flex; flex-direction: column; gap: 5px; }
.cp-campo > span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa2b6; }
.cp-campo > i { font-style: normal; font-size: 12px; color: #3d4356; background: #fbfaff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 10px; }
.cp-msg { line-height: 1.5; min-height: 54px; }
.cp-canales { display: flex; gap: 6px; }
.cp-canales i { flex: 1; font-style: normal; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 650; color: #5b6274; background: #fff; border: 1px solid #eceef5; border-radius: 8px; padding: 7px 4px; }
.cp-canales i svg { width: 13px; height: 13px; }
.cp-canales i.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }

.cp-aud { display: flex; align-items: center; gap: 9px; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 11px; padding: 10px 11px; }
.cp-aud-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #6d28d9; display: grid; place-items: center; }
.cp-aud-ic svg { width: 16px; height: 16px; }
.cp-aud > div { min-width: 0; flex: 1; }
.cp-aud b { display: block; font-size: 12px; color: #171a21; }
.cp-aud small { font-size: 10.5px; color: #77809a; }
.cp-aud em { font-style: normal; flex: none; font-size: 11px; font-weight: 650; color: #6d28d9; }

.cp-envio { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: #5b6274; background: #fff; border: 1px solid #eceef5; border-radius: 999px; padding: 6px 12px; }
.cp-radio i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cfd4e2; }
.cp-radio.is-on { color: #6d28d9; border-color: #d6ccff; background: #faf8ff; }
.cp-radio.is-on i { border-color: #6d28d9; background: radial-gradient(circle, #6d28d9 0 3px, #fff 3px); }

.cp-prev { background: #fff; border: 1px solid #eceef5; border-radius: 12px; overflow: hidden; }
.cp-prev-h { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid #f2f3f8; }
.cp-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #6d28d9); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cp-prev-h b { display: block; font-size: 11px; color: #171a21; }
.cp-prev-h small { font-size: 10px; color: #9aa2b6; }
.cp-prev-b { padding: 11px; }
.cp-prev-b b { display: block; font-size: 12.5px; color: #171a21; margin-bottom: 4px; }
.cp-prev-b span { display: block; font-size: 11px; line-height: 1.5; color: #77809a; margin-bottom: 9px; }
.cp-prev-b em { font-style: normal; display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; background: #6d28d9; border-radius: 7px; padding: 6px 11px; }

.cp-est { background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 11px 12px; }
.cp-est h4 { font-size: 11.5px; font-weight: 700; color: #171a21; margin: 0 0 8px; }
.cp-est-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #77809a; padding: 4px 0; }
.cp-est-f b { color: #171a21; font-size: 12.5px; }
.cp-est-p { font-size: 10px; line-height: 1.45; color: #9aa2b6; margin: 7px 0 0; }

.cp-nota { text-align: center; font-size: 12px; color: #98a0b3; margin: 22px 0 0; }
.cp-nota--mk { text-align: left; font-size: 10.5px; margin: 10px 0 0; }

/* Las seis piezas */
.cp-sec { padding-top: 66px; }
.cp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp-c { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 20px; }
.cp-c-ic { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; margin-bottom: 13px; }
.cp-c-ic svg { width: 19px; height: 19px; }
.cp-c h3 { font-size: 15px; font-weight: 700; color: #171a21; margin: 0 0 6px; letter-spacing: -.01em; }
.cp-c p { font-size: 12.5px; line-height: 1.58; color: #5b6274; margin: 0; }

/* Los bloques A–E */
.cp-bl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: 26px 40px; align-items: center; padding: 34px 0; border-top: 1px solid #eef0f7; }
.cp-bl:first-child { border-top: 0; padding-top: 0; }
.cp-bl--ancho { grid-template-columns: minmax(0, 1fr); }
.cp-letra { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #f0ecff; color: #6d28d9; font-size: 16px; font-weight: 800; margin-bottom: 13px; }
.cp-bl-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.5vw, 29px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 11px; }
.cp-bl-tx > p { font-size: 14.5px; line-height: 1.62; color: #5b6274; margin: 0; max-width: 52ch; }
.cp-li { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cp-li li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #3d4356; }
.cp-ver { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12.5px; font-weight: 650; color: #6d28d9; text-decoration: none; }
.cp-ver svg { width: 14px; height: 14px; }
.cp-ver:hover { text-decoration: underline; }

.cp-bl-mk { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 18px; padding: 16px; }
.cp-mkh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cp-mkh b { font-size: 13px; color: #171a21; }

/* A · constructor de audiencia */
.cp-cond { display: flex; flex-direction: column; gap: 6px; }
.cp-cond-f { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; background: #fff; border: 1px solid #eceef5; border-radius: 10px; padding: 9px 11px; }
.cp-cond-f em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa2b6; }
.cp-cond-f span { font-size: 12px; font-weight: 650; color: #171a21; }
.cp-cond-f b { font-size: 11px; font-weight: 600; color: #77809a; }
.cp-cond-f i { font-style: normal; font-size: 11px; font-weight: 650; color: #6d28d9; background: #f0ecff; border-radius: 6px; padding: 3px 9px; }
.cp-cond-op { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #8b93a8; background: #fff; border: 1px solid #eceef5; border-radius: 999px; padding: 2px 10px; margin-left: 12px; }
.cp-cond-add { font-size: 11.5px; font-weight: 650; color: #6d28d9; border: 1px dashed #d6ccff; border-radius: 10px; padding: 8px; text-align: center; }

.cp-seg-res { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 13px; margin-top: 12px; }
.cp-donut { position: relative; flex: none; width: 92px; height: 92px; }
.cp-donut svg { width: 100%; height: 100%; }
.cp-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cp-donut-c b { display: block; font-size: 15px; color: #171a21; letter-spacing: -.02em; }
.cp-donut-c small { font-size: 9.5px; color: #9aa2b6; }
.cp-ley { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-ley li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5b6274; }
.cp-ley i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cp-ley b { margin-left: auto; font-size: 11.5px; color: #171a21; }

.cp-guard { margin-top: 12px; background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 12px; }
.cp-guard h5 { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; margin: 0 0 8px; }
.cp-guard span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #3d4356; padding: 5px 0; border-top: 1px solid #f4f5fa; }
.cp-guard span:first-of-type { border-top: 0; }
.cp-guard b { font-size: 11.5px; color: #6d28d9; }

/* B · canales */
.cp-can { display: flex; flex-direction: column; gap: 8px; }
.cp-can-c { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1.5px solid #eceef5; border-radius: 12px; padding: 12px; }
.cp-can-c.is-on { border-color: #6d28d9; box-shadow: 0 8px 24px rgba(109, 40, 217, .12); }
.cp-can-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; }
.cp-can-ic svg { width: 17px; height: 17px; }
.cp-can-c > div { min-width: 0; flex: 1; }
.cp-can-c b { display: block; font-size: 13px; color: #171a21; margin-bottom: 3px; }
.cp-can-c small { font-size: 11.5px; line-height: 1.5; color: #77809a; }
.cp-can-tag { flex: none; font-size: 10px; font-weight: 650; color: #5b6274; background: #f4f5f9; border-radius: 6px; padding: 3px 8px; }
.cp-can-av { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; background: #fff; border: 1px solid #eceef5; border-radius: 11px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; color: #77809a; }
.cp-can-av-ic { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #fef3c7; color: #b45309; display: grid; place-items: center; }
.cp-can-av-ic svg { width: 12px; height: 12px; }

/* C · plantillas */
.cp-plt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cp-plt-c { background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 10px; }
.cp-plt-prev { background: #faf9ff; border: 1px solid #f0eefb; border-radius: 8px; height: 78px; padding: 8px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.cp-plt-prev i { display: block; width: var(--w, 100%); height: var(--h, 10%); border-radius: 3px; background: var(--c, #e5e2f2); }
.cp-plt-prev i.bt { margin-top: auto; width: 46%; height: 14%; background: #6d28d9; }
.cp-plt-prev--wa { background: #f2fbf5; border-color: #d9f0e2; }
.cp-plt-prev--wa i { background: #c9e9d5; }
.cp-plt-c b { display: block; font-size: 12px; color: #171a21; }
.cp-plt-c small { font-size: 10.5px; color: #9aa2b6; }
.cp-plt-c--new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; border-color: #d6ccff; background: #faf8ff; color: #6d28d9; min-height: 120px; }
.cp-plt-c--new span { font-size: 22px; font-weight: 300; line-height: 1; }
.cp-plt-c--new b { color: #6d28d9; font-size: 12px; }

/* D · resultados */
.cp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cp-kpi { background: #fff; border: 1px solid #eceef5; border-radius: 11px; padding: 10px; }
.cp-kpi small { display: block; font-size: 10px; color: #9aa2b6; margin-bottom: 3px; }
.cp-kpi b { font-size: 15px; color: #171a21; letter-spacing: -.02em; }
.cp-kpi--alta { background: #f5f3ff; border-color: #e9e3ff; }
.cp-kpi--alta b { color: #6d28d9; }
.cp-kpi--ancha { grid-column: span 2; }

.cp-graf, .cp-canres { margin-top: 10px; background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 12px; }
.cp-graf h5, .cp-canres h5 { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; margin: 0 0 9px; }
.cp-barras { display: flex; align-items: flex-end; gap: 7px; height: 62px; }
.cp-barras i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #a78bfa, #6d28d9); }
.cp-barras-x { display: flex; gap: 7px; margin-top: 5px; }
.cp-barras-x span { flex: 1; text-align: center; font-size: 9.5px; color: #a2aabd; }
.cp-canres-f { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.cp-canres-f > span { flex: none; width: 66px; font-size: 11.5px; color: #5b6274; }
.cp-canres-f i { flex: 1; height: 7px; border-radius: 999px; background: #f0eefb; overflow: hidden; display: block; }
.cp-canres-f b { display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--c, #6d28d9); }
.cp-canres-f em { font-style: normal; flex: none; width: 34px; text-align: right; font-size: 11.5px; font-weight: 700; color: #171a21; }

/* E · la cadena */
.cp-cadena { display: flex; align-items: stretch; gap: 8px; margin-top: 22px; }
.cp-cad-p { flex: 1; min-width: 0; background: #fff; border: 1px solid #e9ebf3; border-radius: 14px; padding: 15px 13px; text-align: center; }
.cp-cad-p--fin { background: #f5f3ff; border-color: #e9e3ff; }
.cp-cad-ic { width: 34px; height: 34px; border-radius: 11px; background: #f0ecff; color: #6d28d9; display: grid; place-items: center; margin: 0 auto 9px; }
.cp-cad-ic svg { width: 17px; height: 17px; }
.cp-cad-p b { display: block; font-size: 13px; color: #171a21; margin-bottom: 4px; }
.cp-cad-p small { font-size: 11px; line-height: 1.45; color: #77809a; }
.cp-cad-fl { flex: none; align-self: center; color: #c9c2e4; }
.cp-cad-fl svg { width: 17px; height: 17px; display: block; }

.cp-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 30px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
.cp-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.cp-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.cp-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cp-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.cp-cta-btn svg { width: 17px; height: 17px; }
.cp-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1080px) {
  .cp-hero-grid, .cp-bl { grid-template-columns: minmax(0, 1fr); }
  .cp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La cadena de cinco pasos no cabe en fila: pasa a columna y las flechas
     giran para seguir señalando hacia dónde va. */
  .cp-cadena { flex-direction: column; }
  .cp-cad-fl { transform: rotate(90deg); }
}
@media (max-width: 720px) {
  .cp-hero-mk { grid-template-columns: minmax(0, 1fr); }
  .cp-mk-body { border-right: 0; border-bottom: 1px solid #f0f1f7; }
  .cp-cards, .cp-plt { grid-template-columns: minmax(0, 1fr); }
  .cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-seg-res { flex-direction: column; align-items: stretch; }
  .cp-donut { margin: 0 auto; }
  .cp-cta { grid-template-columns: minmax(0, 1fr); }
  .cp-cta-form { align-items: stretch; }
}

/* ══ PÁGINA «IA Y CONOCIMIENTO» ══════════════════════════════════════════════
   De qué aprende Cuho, cómo se prueba antes de encenderlo y qué gasta. Dos
   maquetas dobles (fuentes + asistente, simulador + control) y el bloque de
   consumo con su donut. El prefijo es `.iac-`. */
.iac-hero { padding-bottom: 6px; }
.iac-hero-in { text-align: center; max-width: 880px; margin: 0 auto; }
.iac-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 18px; }
.iac-hero-in h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.iac-hero-sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: #5b6274; margin: 0 auto 24px; max-width: 680px; }
.iac-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 20px; }
.iac-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.iac-ticks span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #5b6274; }
.iac-ticks i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #ede9fe; color: #6d28d9; display: grid; place-items: center; }
.iac-ticks i svg { width: 10px; height: 10px; }

/* El panel es la pieza que se repite: cabecera con icono y cuerpo. Lo usan la
   maqueta doble, el simulador y los cuatro bloques de consumo. */
.iac-p { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; }
.iac-p-h { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #f0f1f7; margin-bottom: 14px; }
.iac-p-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.iac-p-ic svg { width: 18px; height: 18px; }
.iac-p-ic--cuho { background: #ede9fe; padding: 6px; }
.iac-p-ic--cuho img { width: 100%; height: 100%; object-fit: contain; display: block; }
.iac-p-h > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.iac-p-h b { font-size: 14.5px; color: #171a21; }
.iac-p-h small { font-size: 11.5px; color: #8b93a8; }
.iac-estado { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 4px 10px; }
.iac-estado i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }

.iac-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
/* La conversación crece hasta el alto del panel de fuentes, que es más largo.
   Sin esto quedaba un palmo de blanco muerto debajo del chat. */
.iac-demo .iac-chat { flex: 1; }

.iac-fuentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.iac-fuentes li { display: flex; align-items: center; gap: 10px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 10px; padding: 9px 11px; }
.iac-f-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; }
.iac-f-ic svg { width: 14px; height: 14px; }
.iac-fuentes b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #3d4356; }
.iac-fuentes em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #6d28d9; background: #f2edff; border-radius: 6px; padding: 3px 8px; }
.iac-add { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; border: 1.5px dashed #d8d3ee; border-radius: 10px; padding: 9px; font-size: 12.5px; font-weight: 600; color: #7c3aed; }
.iac-add svg { width: 14px; height: 14px; }

.iac-conf { margin-top: 14px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 12px; padding: 12px 13px; }
.iac-conf-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.iac-conf-h b { font-size: 12.5px; color: #171a21; }
.iac-alta { font-size: 11.5px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 3px 9px; }
.iac-media { font-size: 11.5px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 3px 9px; }
.iac-barra { height: 7px; border-radius: 999px; background: #ece9f8; overflow: hidden; }
.iac-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a855f7); transition: width .22s ease; }
.iac-barra i.is-media { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.iac-conf > small { display: block; margin-top: 7px; font-size: 11px; line-height: 1.45; color: #8b93a8; }

.iac-chat { display: flex; flex-direction: column; gap: 8px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 13px; padding: 12px; }
.iac-m { align-self: flex-start; max-width: 92%; background: #fff; border: 1px solid #eceef5; border-radius: 11px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; color: #3d4356; }
.iac-m time { display: block; font-size: 10px; color: #a2aabd; margin-top: 3px; }
.iac-m--out { align-self: flex-end; background: #6d28d9; border-color: #6d28d9; color: #fff; }
.iac-m--out time { color: rgba(255, 255, 255, .72); text-align: right; }
.iac-m--deriva { align-self: stretch; max-width: none; background: #fffbeb; border-color: #fde68a; color: #92400e; font-weight: 600; }
.iac-fuente { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e4dcff; border-radius: 11px; padding: 9px 11px; }
.iac-fuente-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #f2edff; color: #6d28d9; display: grid; place-items: center; }
.iac-fuente-ic svg { width: 14px; height: 14px; }
.iac-fuente > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.iac-fuente b { font-size: 11.5px; color: #171a21; font-weight: 650; }
.iac-fuente small { font-size: 10.5px; color: #8b93a8; }
.iac-fuente-ver { flex: none; font-size: 11px; font-weight: 700; color: #6d28d9; }

.iac-porques { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.iac-porques li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.45; color: #5b6274; }
.iac-ok { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; margin-top: 1px; }
.iac-ok svg { width: 9px; height: 9px; }

.iac-nota { text-align: center; font-size: 12px; line-height: 1.5; color: #98a0b3; margin: 18px auto 0; max-width: 74ch; }

.iac-vent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.iac-v { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.iac-v-ic { width: 38px; height: 38px; border-radius: 11px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; margin-bottom: 12px; }
.iac-v-ic svg { width: 19px; height: 19px; }
.iac-v h3 { font-size: 14.5px; font-weight: 700; color: #171a21; margin: 0 0 6px; }
.iac-v p { font-size: 12.5px; line-height: 1.55; color: #5b6274; margin: 0; }

.iac-apr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.iac-a { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 14px; padding: 15px; }
.iac-a-ic { width: 32px; height: 32px; border-radius: 9px; background: #fff; color: #6d28d9; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid #ece9f8; }
.iac-a-ic svg { width: 16px; height: 16px; }
.iac-a b { display: block; font-size: 13px; color: #171a21; margin-bottom: 4px; }
.iac-a small { font-size: 11.5px; line-height: 1.5; color: #77809a; }

.iac-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: iacp; }
.iac-pasos li { position: relative; background: #fff; border: 1px solid #e9ebf3; border-radius: 15px; padding: 16px; }
.iac-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #6d28d9; color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 11px; }
.iac-pasos b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.iac-pasos small { font-size: 11.5px; line-height: 1.5; color: #77809a; }

.iac-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.iac-sim-preg { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.iac-q { border: 1px solid #e6e8f0; background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600; color: #5b6274; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.iac-q:hover { border-color: #c4b5fd; background: #faf8ff; }
.iac-q.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.iac-h4 { font-size: 12.5px; font-weight: 700; color: #171a21; margin: 15px 0 8px; }
.iac-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.iac-src li { background: #fbfaff; border: 1px solid #f0eefb; border-radius: 10px; padding: 8px 11px; }
.iac-src b { display: block; font-size: 11.5px; color: #171a21; font-weight: 650; }
.iac-src small { font-size: 10.5px; color: #8b93a8; }

.iac-ctrl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.iac-ctrl li { display: flex; align-items: flex-start; gap: 10px; }
.iac-ctrl b { display: block; font-size: 12.5px; color: #171a21; font-weight: 650; margin-bottom: 2px; }
.iac-ctrl small { font-size: 11.5px; line-height: 1.5; color: #77809a; }
.iac-ctrl b i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6d28d9; background: #f2edff; border: 1px solid #e4dcff; border-radius: 5px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px; }

.iac-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.iac-donut-fila { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.iac-donut { position: relative; flex: none; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(#6d28d9 0 48%, #a78bfa 48% 82%, #ddd6fe 82% 100%); display: grid; place-items: center; }
.iac-donut::before { content: ''; position: absolute; inset: 21px; border-radius: 50%; background: #fff; }
.iac-donut span { position: relative; text-align: center; }
.iac-donut b { display: block; font-size: 19px; font-weight: 800; color: #171a21; letter-spacing: -.02em; }
.iac-donut small { font-size: 10.5px; color: #8b93a8; }
.iac-leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 9px; }
.iac-leyenda li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.iac-leyenda i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.iac-leyenda b { flex: 1; font-weight: 600; color: #3d4356; }
.iac-leyenda em { font-style: normal; font-weight: 700; color: #171a21; }

.iac-incluye { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.iac-incluye li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.45; color: #3d4356; }
.iac-ver { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 14px; font-size: 12.5px; font-weight: 650; color: #6d28d9; text-decoration: none; }
.iac-ver svg { width: 14px; height: 14px; }
.iac-ver:hover { text-decoration: underline; }

.iac-recargas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.iac-r { position: relative; text-align: center; background: #fbfaff; border: 1.5px solid #ece9f8; border-radius: 12px; padding: 14px 8px; }
.iac-r b { display: block; font-size: 16px; font-weight: 800; color: #171a21; letter-spacing: -.02em; }
.iac-r small { font-size: 10.5px; color: #8b93a8; }
.iac-r.is-pop { border-color: #6d28d9; background: #f7f4ff; }
.iac-r i { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #6d28d9; border-radius: 999px; padding: 3px 8px; }
.iac-recargar { width: 100%; justify-content: center; margin-top: 13px; }
.iac-acum { font-size: 11.5px; line-height: 1.55; color: #77809a; margin: 11px 0 0; }
.iac-acum b { color: #3d4356; }

.iac-metricas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.iac-metricas li { display: flex; align-items: baseline; gap: 12px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 11px 13px; }
.iac-metricas b { flex: none; min-width: 62px; font-size: 19px; font-weight: 800; color: #6d28d9; letter-spacing: -.02em; }
.iac-metricas small { font-size: 12px; line-height: 1.4; color: #5b6274; }

.iac-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 24px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
/* EL LOGO SOBRE MORADO NECESITA SUELO CLARO.
   La marca de Cuho es una C de degradado morado sin UN SOLO pixel claro. Sobre
   esta banda —linear-gradient(115deg,#6d28d9,#7c3aed,#8b5cf6)— se la come el
   fondo: medido pixel a pixel, el 100 % de su tinta queda por debajo de 3:1, y
   el mejor caso es 2,68:1. El logo de antes era un bocadillo con un 22 % de
   tinta casi blanca y por eso aguantaba; este no.
   La baldosa translucida que habia aqui (blanco al 15 %) no levantaba nada. Va
   blanca entera, y entonces la marca se lee y parece lo que es: un icono.
   En el pie (#101014) NO hace falta —ahi si se lee—, y por eso no se toca.
   Lo propio de marca seria una version clara del logo para fondos oscuros; eso
   lo decide el dueno. */
.iac-cta-owl { width: 62px; height: 62px; border-radius: 16px; background: #fff; padding: 9px; object-fit: contain; }
.iac-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.iac-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.iac-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.iac-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.iac-cta-btn svg { width: 17px; height: 17px; }
.iac-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1080px) {
  .iac-vent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iac-apr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iac-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .iac-demo, .iac-dos, .iac-cons { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .iac-vent, .iac-pasos { grid-template-columns: minmax(0, 1fr); }
  .iac-apr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iac-cta { grid-template-columns: minmax(0, 1fr); }
  .iac-cta-form { align-items: stretch; }
  .iac-donut-fila { justify-content: center; }
}

/* ══ PÁGINA «PROMOCIONES» ════════════════════════════════════════════════════
   Absorbe Bonos y tarjetas regalo, que eran un apartado suelto. El peso de la
   página está en las condiciones, el control de uso y la medición —qué pedidos
   salieron de cada promoción— y no en el catálogo de formas de bajar el
   precio, que es lo que había antes. */
.pm-hero { padding-bottom: 4px; }
.pm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 34px 40px; align-items: center; }
.pm-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 16px; }
.pm-hero-tx h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 3.9vw, 50px); font-weight: 800; color: #171a21; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 14px; }
.pm-hero-sub { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.62; color: #5b6274; margin: 0 0 24px; max-width: 54ch; }
.pm-hero-cta { display: flex; flex-wrap: wrap; gap: 11px; }
.pm-ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; padding: 0; }
.pm-ticks li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #5b6274; }
.pm-tk { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.pm-tk svg { width: 9px; height: 9px; }

.pm-hero-mk { background: #fff; border: 1px solid #e9ebf3; border-radius: 20px; box-shadow: 0 26px 60px -34px rgba(76, 29, 149, .35); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.pm-mk-h { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #f0f1f7; }
.pm-mk-h b { font-size: 13.5px; color: #171a21; }
.pm-pill { font-size: 10.5px; font-weight: 700; color: #77809a; background: #f4f5f9; border-radius: 999px; padding: 4px 10px; }
.pm-pill--on { color: #15803d; background: #dcfce7; }
.pm-mk-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; border-right: 1px solid #f0f1f7; }
.pm-mk-side { padding: 14px 16px; background: #fbfaff; display: flex; flex-direction: column; gap: 12px; }

.pm-campo { display: flex; flex-direction: column; gap: 5px; }
.pm-campo > span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa2b6; }
.pm-campo > i { font-style: normal; font-size: 12px; color: #3d4356; background: #fbfaff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 10px; }
.pm-tipos { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-tipos i { font-style: normal; font-size: 11px; font-weight: 650; color: #5b6274; background: #fff; border: 1px solid #eceef5; border-radius: 999px; padding: 6px 12px; }
.pm-tipos i.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.pm-mini-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fbfaff; border: 1px solid #eceef5; border-radius: 9px; padding: 7px 9px; }
.pm-mini-cond + .pm-mini-cond { margin-top: 5px; }
.pm-mini-cond em { font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa2b6; }
.pm-mini-cond b { font-size: 11.5px; font-weight: 650; color: #171a21; }
.pm-mini-cond span { font-size: 10.5px; color: #77809a; }
.pm-mini-cond i { font-style: normal; font-size: 10.5px; font-weight: 650; color: #6d28d9; background: #f0ecff; border-radius: 5px; padding: 2px 8px; }
.pm-canales { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-canales i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #8b93a8; background: #f4f5f9; border-radius: 6px; padding: 4px 9px; }
.pm-canales i.is-on { color: #6d28d9; background: #f0ecff; }

.pm-cupon { position: relative; background: linear-gradient(125deg, #6d28d9, #8b5cf6); border-radius: 14px; padding: 16px 14px; text-align: center; color: #fff; }
.pm-cupon-t { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 3px 10px; }
.pm-cupon b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 7px 0 6px; }
.pm-cupon-c { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; border: 1px dashed rgba(255, 255, 255, .55); border-radius: 8px; padding: 5px; }
.pm-cupon small { display: block; font-size: 10px; color: rgba(255, 255, 255, .8); margin-top: 7px; }

.pm-est { background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 11px 12px; }
.pm-est h4 { font-size: 11.5px; font-weight: 700; color: #171a21; margin: 0 0 8px; }
.pm-est-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #77809a; padding: 4px 0; }
.pm-est-f b { color: #171a21; font-size: 12.5px; }
.pm-est-p { font-size: 10px; line-height: 1.45; color: #9aa2b6; margin: 7px 0 0; }

.pm-nota { text-align: center; font-size: 12px; color: #98a0b3; margin: 20px 0 0; }

.pm-sec { padding-top: 66px; }
.pm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pm-c { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 20px; }
.pm-c-ic { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; margin-bottom: 13px; }
.pm-c-ic svg { width: 19px; height: 19px; }
.pm-c h3 { font-size: 15px; font-weight: 700; color: #171a21; margin: 0 0 6px; letter-spacing: -.01em; }
.pm-c p { font-size: 12.5px; line-height: 1.58; color: #5b6274; margin: 0; }

/* Cabecera numerada de los cinco apartados */
.pm-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.pm-num { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #f0ecff; color: #6d28d9; font-size: 16px; font-weight: 800; }
.pm-head h2, .pm-bl-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.5vw, 29px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 9px; }
.pm-head p, .pm-bl-tx > p { font-size: 14.5px; line-height: 1.62; color: #5b6274; margin: 0; max-width: 64ch; }
.pm-bl-tx .pm-num { margin-bottom: 13px; }

/* 1 · tipos de promoción */
.pm-tipos-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pm-t { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; }
.pm-t-val { display: inline-grid; place-items: center; align-self: flex-start; min-width: 56px; height: 40px; padding: 0 12px; border-radius: 11px; background: color-mix(in srgb, var(--c) 11%, #fff); color: var(--c); font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.pm-t b { font-size: 14px; color: #171a21; margin-bottom: 5px; }
.pm-t small { font-size: 12px; line-height: 1.5; color: #77809a; flex: 1; }
.pm-t em { font-style: normal; font-size: 11px; font-weight: 650; color: #6d28d9; background: #f5f3ff; border-radius: 7px; padding: 5px 9px; margin-top: 12px; align-self: flex-start; }

/* El panel de bonos */
.pm-bonos { margin-top: 26px; background: #fbfaff; border: 1px solid #ece9f8; border-radius: 20px; padding: clamp(18px, 2.4vw, 26px); }
.pm-bonos-h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.pm-bonos-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; background: #fdeef5; color: #db2777; display: grid; place-items: center; }
.pm-bonos-ic svg { width: 22px; height: 22px; }
.pm-bonos-h h3 { font-size: 18px; font-weight: 700; color: #171a21; margin: 0 0 6px; letter-spacing: -.015em; }
.pm-bonos-h p { font-size: 13.5px; line-height: 1.6; color: #5b6274; margin: 0; max-width: 76ch; }
.pm-bonos-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-b { background: #fff; border: 1px solid #eceef5; border-radius: 13px; padding: 14px; }
.pm-b b { display: block; font-size: 13px; color: #171a21; margin-bottom: 5px; }
.pm-b span { font-size: 12px; line-height: 1.55; color: #77809a; }

/* Bloques de dos columnas (2 y 4) */
.pm-bl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px 40px; align-items: center; }
.pm-li { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pm-li li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #3d4356; }
.pm-bl-mk { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 18px; padding: 16px; }
.pm-mkh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pm-mkh b { font-size: 13px; color: #171a21; }

.pm-cond { display: flex; flex-direction: column; gap: 6px; }
.pm-cond-f { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; background: #fff; border: 1px solid #eceef5; border-radius: 10px; padding: 9px 11px; }
.pm-cond-f em { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa2b6; }
.pm-cond-f span { font-size: 12px; font-weight: 650; color: #171a21; }
.pm-cond-f b { font-size: 11px; font-weight: 600; color: #77809a; }
.pm-cond-f i { font-style: normal; font-size: 11px; font-weight: 650; color: #6d28d9; background: #f0ecff; border-radius: 6px; padding: 3px 9px; }
.pm-cond-op { align-self: flex-start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #8b93a8; background: #fff; border: 1px solid #eceef5; border-radius: 999px; padding: 2px 10px; margin-left: 12px; }
.pm-cond-add { font-size: 11.5px; font-weight: 650; color: #6d28d9; border: 1px dashed #d6ccff; border-radius: 10px; padding: 8px; text-align: center; }

.pm-alcance, .pm-uso { margin-top: 12px; background: #fff; border: 1px solid #eceef5; border-radius: 12px; padding: 12px; }
.pm-alcance h5, .pm-uso h5, .pm-graf h5, .pm-tabla h5 { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; margin: 0 0 9px; }
.pm-alc-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #77809a; padding: 5px 0; border-top: 1px solid #f4f5fa; }
.pm-alc-f:first-of-type { border-top: 0; }
.pm-alc-f b { font-size: 11.5px; color: #171a21; text-align: right; }
.pm-alc-f b.pm-si { color: #16a34a; }

.pm-ctrl { display: flex; flex-direction: column; gap: 6px; }
.pm-ctrl-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #eceef5; border-radius: 10px; padding: 9px 11px; font-size: 12px; color: #5b6274; }
.pm-ctrl-f b { font-size: 12.5px; color: #171a21; }
.pm-sw { flex: none; width: 30px; height: 17px; border-radius: 999px; background: #dfe3ec; position: relative; display: inline-block; }
.pm-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.pm-sw.on { background: #6d28d9; }
.pm-sw.on::after { transform: translateX(13px); }

.pm-uso-b { height: 9px; border-radius: 999px; background: #f0eefb; overflow: hidden; }
.pm-uso-b i { display: block; width: var(--w); height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.pm-uso-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: #9aa2b6; }

.pm-aviso { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; background: #fff; border: 1px solid #eceef5; border-radius: 11px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5; color: #77809a; }
.pm-aviso-ic { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #fef3c7; color: #b45309; display: grid; place-items: center; }
.pm-aviso-ic svg { width: 12px; height: 12px; }

/* 3 · canales */
.pm-can-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pm-can { position: relative; background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.pm-can-ic { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; margin-bottom: 11px; }
.pm-can-ic svg { width: 18px; height: 18px; }
.pm-can b { display: block; font-size: 14px; color: #171a21; margin-bottom: 5px; }
.pm-can small { font-size: 12px; line-height: 1.5; color: #77809a; }
.pm-can .pm-sw { position: absolute; top: 18px; right: 18px; }

/* 5 · resultados */
.pm-res { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 20px; padding: clamp(18px, 2.4vw, 26px); }
.pm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pm-kpi { background: #fff; border: 1px solid #eceef5; border-radius: 13px; padding: 14px; }
.pm-kpi small { display: block; font-size: 11px; color: #9aa2b6; margin-bottom: 4px; }
.pm-kpi b { font-size: 22px; color: #171a21; letter-spacing: -.03em; }
.pm-kpi--alta { background: #f5f3ff; border-color: #e9e3ff; }
.pm-kpi--alta b { color: #6d28d9; }

.pm-res-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.pm-graf, .pm-tabla { background: #fff; border: 1px solid #eceef5; border-radius: 13px; padding: 14px; }
/* Cada barra lleva DOS alturas: los usos (clara, --h, sobre el alto del
   gráfico) y los que acabaron en pedido (morada, --h2, sobre el alto de SU
   barra). --h2 va ya calculado en el HTML a propósito: dividir dos porcentajes
   dentro de calc() lo entiende Chrome, pero no es terreno firme en el resto de
   navegadores, y ahí la barra morada desaparecería sin avisar. */
.pm-barras { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.pm-barras i { position: relative; flex: 1; height: var(--h); border-radius: 5px 5px 3px 3px; background: #ddd5f8; }
.pm-barras i::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h2); border-radius: 4px 4px 3px 3px; background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.pm-barras-x { display: flex; gap: 8px; margin-top: 6px; }
.pm-barras-x span { flex: 1; text-align: center; font-size: 9.5px; color: #a2aabd; }
.pm-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.pm-ley span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #77809a; }
.pm-ley i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }

.pm-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #f4f5fa; font-size: 12px; }
.pm-tr:first-of-type { border-top: 0; }
.pm-tr span { color: #3d4356; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-tr b { width: 42px; text-align: right; font-size: 11.5px; color: #77809a; font-weight: 600; }
.pm-tr em { font-style: normal; width: 62px; text-align: right; font-size: 12px; font-weight: 700; color: #171a21; }
.pm-tr--h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; }
.pm-tr--h span, .pm-tr--h b, .pm-tr--h em { color: #9aa2b6; font-weight: 700; font-size: 10px; }
.pm-tr--mal em { color: #b45309; }

.pm-honesto { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; background: #fff; border: 1px solid #eceef5; border-radius: 13px; padding: 14px 16px; }
.pm-honesto-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #ecfdf5; color: #059669; display: grid; place-items: center; }
.pm-honesto-ic svg { width: 17px; height: 17px; }
.pm-honesto b { display: block; font-size: 13px; color: #171a21; margin-bottom: 4px; }
.pm-honesto span { font-size: 12px; line-height: 1.6; color: #77809a; }

/* Los cinco pasos */
.pm-pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pm-paso { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.pm-paso-n { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #6d28d9; margin-bottom: 9px; }
.pm-paso b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.pm-paso small { font-size: 12px; line-height: 1.5; color: #77809a; }

.pm-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 30px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
.pm-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.pm-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.pm-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pm-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.pm-cta-btn svg { width: 17px; height: 17px; }
.pm-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1080px) {
  .pm-hero-grid, .pm-bl, .pm-res-g { grid-template-columns: minmax(0, 1fr); }
  .pm-cards, .pm-can-g, .pm-bonos-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-tipos-g, .pm-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pm-hero-mk { grid-template-columns: minmax(0, 1fr); }
  .pm-mk-body { border-right: 0; border-bottom: 1px solid #f0f1f7; }
  .pm-cards, .pm-can-g, .pm-bonos-g, .pm-tipos-g, .pm-pasos { grid-template-columns: minmax(0, 1fr); }
  .pm-head, .pm-bonos-h { flex-direction: column; gap: 10px; }
  .pm-cta { grid-template-columns: minmax(0, 1fr); }
  .pm-cta-form { align-items: stretch; }
}

/* ══ PÁGINA «POLÍTICAS, DEVOLUCIONES Y GARANTÍAS» ════════════════════════════
   Esta entrada del menú llevaba a una sección de otra página. Aquí el hilo es:
   la regla se escribe una vez (panel 2), Cuho responde citándola con su versión
   (panel 3) y queda constancia de con qué regla contestó. Los tres paneles van
   juntos arriba porque el salto está en el tercero. */
.pl-hero { padding-bottom: 4px; }
.pl-hero-in { text-align: center; max-width: 860px; margin: 0 auto; }
.pl-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 18px; }
.pl-hero-in h1 { font-family: var(--font-display, inherit); font-size: clamp(29px, 4.2vw, 50px); font-weight: 800; color: #171a21; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 14px; }
.pl-hero-sub { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.62; color: #5b6274; margin: 0 auto 26px; max-width: 66ch; }
.pl-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-bottom: 26px; }
.pl-micros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pl-micro { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid #e9ebf3; border-radius: 13px; padding: 12px 14px; }
.pl-micro-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.pl-micro-ic svg { width: 16px; height: 16px; }
.pl-micro b { display: block; font-size: 12.5px; color: #171a21; }
.pl-micro small { font-size: 11.5px; color: #8b93a8; }
.pl-canales { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; }
.pl-canales > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa2b6; margin-right: 3px; }
.pl-canales i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #5b6274; background: #fff; border: 1px solid #e9ebf3; border-radius: 999px; padding: 5px 12px; }

/* Los tres paneles */
.pl-sec { padding-top: 66px; }
.pl-paneles { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.12fr) minmax(0, 1.06fr); gap: 16px; align-items: start; }
.pl-pan { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 16px; }
.pl-pan-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #f0f1f7; margin-bottom: 13px; }
.pl-pan-h b { font-size: 13.5px; color: #171a21; }
.pl-pill { font-size: 10.5px; font-weight: 700; color: #77809a; background: #f4f5f9; border-radius: 999px; padding: 4px 10px; }
.pl-pill--on { color: #15803d; background: #dcfce7; }

.pl-bib { display: flex; flex-direction: column; gap: 6px; }
.pl-bib-f { display: flex; align-items: center; gap: 9px; border: 1.5px solid #eceef5; border-radius: 11px; padding: 9px 10px; }
.pl-bib-f.is-on { border-color: #6d28d9; background: #faf8ff; }
.pl-bib-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.pl-bib-ic svg { width: 15px; height: 15px; }
.pl-bib-f b { display: block; font-size: 12.5px; color: #171a21; font-weight: 650; }
.pl-bib-f small { font-size: 10.5px; color: #9aa2b6; }
.pl-add { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 650; color: #6d28d9; border: 1px dashed #d6ccff; border-radius: 10px; padding: 8px; text-align: center; }

.pl-form { display: flex; flex-direction: column; gap: 10px; }
.pl-campo { display: flex; flex-direction: column; gap: 5px; }
.pl-campo > span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9aa2b6; }
.pl-campo > i { font-style: normal; font-size: 12px; line-height: 1.45; color: #3d4356; background: #fbfaff; border: 1px solid #eceef5; border-radius: 9px; padding: 8px 10px; }
.pl-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-cond { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #3d4356; background: #fbfaff; border: 1px solid #eceef5; border-radius: 9px; padding: 7px 10px; }
.pl-cond + .pl-cond { margin-top: 5px; }
.pl-ok { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.pl-ok svg { width: 9px; height: 9px; }
.pl-interna { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 11px; }
.pl-interna-t { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #b45309; margin-bottom: 4px; }
.pl-interna span { font-size: 11.5px; line-height: 1.5; color: #7c5a12; }

.pl-chat { display: flex; flex-direction: column; gap: 8px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 13px; padding: 12px; }
.pl-m { align-self: flex-start; max-width: 92%; background: #fff; border: 1px solid #eceef5; border-radius: 11px; padding: 9px 11px; font-size: 12px; line-height: 1.5; color: #3d4356; }
.pl-m time { display: block; font-size: 10px; color: #a2aabd; margin-top: 4px; }
.pl-m--out { align-self: flex-end; background: #6d28d9; border-color: #6d28d9; color: #fff; }
.pl-m--out time { color: rgba(255, 255, 255, .72); text-align: right; }
.pl-fuente { display: flex; align-items: center; gap: 9px; margin-top: 10px; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 11px; padding: 10px 11px; }
.pl-fuente-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #6d28d9; display: grid; place-items: center; }
.pl-fuente-ic svg { width: 15px; height: 15px; }
.pl-fuente b { display: block; font-size: 12px; color: #171a21; }
.pl-fuente small { font-size: 10.5px; color: #77809a; }
.pl-nunca { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: #77809a; }
.pl-nunca-ic { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #fef3c7; color: #b45309; display: grid; place-items: center; }
.pl-nunca-ic svg { width: 12px; height: 12px; }

.pl-nota { text-align: center; font-size: 12px; color: #98a0b3; margin: 20px 0 0; }
.pl-nota--mk { text-align: left; font-size: 10.5px; margin: 11px 0 0; }

.pl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pl-c { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 20px; }
.pl-c-ic { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; margin-bottom: 13px; }
.pl-c-ic svg { width: 19px; height: 19px; }
.pl-c h3 { font-size: 15px; font-weight: 700; color: #171a21; margin: 0 0 6px; letter-spacing: -.01em; }
.pl-c p { font-size: 12.5px; line-height: 1.58; color: #5b6274; margin: 0; }

.pl-def { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.pl-d { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 14px; padding: 15px; }
.pl-d b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.pl-d span { font-size: 12px; line-height: 1.55; color: #77809a; }

.pl-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pl-paso { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.pl-paso-n { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #6d28d9; margin-bottom: 9px; }
.pl-paso b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.pl-paso small { font-size: 12px; line-height: 1.5; color: #77809a; }

.pl-tabla { margin-top: 22px; background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 18px; }
.pl-tabla-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.pl-tabla-h b { font-size: 14px; color: #171a21; }
/* La tabla tiene seis columnas: en pantalla estrecha se desplaza ELLA, no la
   página entera. Sin esto aparece la barra horizontal del documento. */
.pl-scroll { overflow-x: auto; }
.pl-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; }
.pl-scroll th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; padding: 0 10px 9px 0; border-bottom: 1px solid #f0f1f7; }
.pl-scroll td { font-size: 12px; color: #3d4356; padding: 9px 10px 9px 0; border-bottom: 1px solid #f6f7fb; }
.pl-scroll tr:last-child td { border-bottom: 0; }
.pl-scroll td:first-child { font-weight: 650; color: #171a21; }
.pl-est { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pl-est--on { color: #15803d; background: #dcfce7; }
.pl-est--bor { color: #b45309; background: #fef3c7; }
.pl-est--off { color: #77809a; background: #f4f5f9; }

.pl-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pl-t { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 20px; }
.pl-t h3 { font-size: 16px; font-weight: 700; color: #171a21; margin: 0 0 7px; letter-spacing: -.015em; }
.pl-t > p { font-size: 12.5px; line-height: 1.58; color: #77809a; margin: 0 0 14px; }
.pl-li { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pl-li li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #3d4356; }
.pl-tk { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: grid; place-items: center; }
.pl-tk svg { width: 9px; height: 9px; }

.pl-caso { display: flex; flex-direction: column; gap: 4px; }
.pl-caso-f { background: #fbfaff; border: 1px solid #eceef5; border-radius: 11px; padding: 11px; }
.pl-caso-f--res { background: #f5f3ff; border-color: #e9e3ff; }
.pl-caso-t { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa2b6; margin-bottom: 5px; }
.pl-caso-f b { font-size: 12px; line-height: 1.5; color: #171a21; font-weight: 600; }
.pl-caso-fl { color: #c9c2e4; text-align: center; }
.pl-caso-fl svg { width: 16px; height: 16px; }

.pl-cob { display: flex; flex-direction: column; gap: 13px; }
.pl-estados { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pl-e { font-size: 10.5px; font-weight: 650; color: #77809a; background: #f4f5f9; border-radius: 999px; padding: 4px 9px; }
.pl-e--on { color: #6d28d9; background: #f0ecff; }
.pl-estados i { width: 8px; height: 1.5px; background: #dfe3ec; }
.pl-plazo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #77809a; padding: 6px 0; border-top: 1px solid #f4f5fa; }
.pl-plazos .pl-plazo:first-child { border-top: 0; }
.pl-plazo b { font-size: 12px; color: #171a21; text-align: right; }
.pl-flujos { display: flex; flex-wrap: wrap; gap: 5px; }
.pl-flujos span { font-size: 10.5px; color: #5b6274; background: #fbfaff; border: 1px solid #eceef5; border-radius: 7px; padding: 4px 8px; }

.pl-herencia { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 18px; padding: 20px 24px; }
.pl-herencia-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; background: #fff; color: #6d28d9; display: grid; place-items: center; }
.pl-herencia-ic svg { width: 22px; height: 22px; }
.pl-herencia b { display: block; font-size: 15px; color: #171a21; margin-bottom: 5px; }
.pl-herencia span { font-size: 13px; line-height: 1.6; color: #5b6274; }

.pl-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 30px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
.pl-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.pl-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.pl-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pl-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.pl-cta-btn svg { width: 17px; height: 17px; }
.pl-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1080px) {
  .pl-paneles, .pl-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-cards, .pl-def { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pl-paneles, .pl-tres, .pl-cards, .pl-def, .pl-pasos { grid-template-columns: minmax(0, 1fr); }
  .pl-micros { grid-template-columns: minmax(0, 1fr); }
  .pl-herencia { flex-direction: column; }
  .pl-cta { grid-template-columns: minmax(0, 1fr); }
  .pl-cta-form { align-items: stretch; }
}
/* ══ PÁGINA «EQUIPO Y PERMISOS» ══════════════════════════════════════════════
   Los cuatro roles con lo que abre cada uno, la matriz por módulo con sus tres
   estados y el rastro de lo que queda anotado. El prefijo es `.eqp-`. */
.eqp-hero { padding-bottom: 6px; }
.eqp-hero-in { text-align: center; max-width: 860px; margin: 0 auto; }
.eqp-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 18px; }
.eqp-hero-in h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.eqp-hero-sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: #5b6274; margin: 0 auto 24px; max-width: 660px; }
.eqp-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.eqp-micros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.eqp-micro { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid #e9ebf3; border-radius: 13px; padding: 12px 14px; }
.eqp-micro-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.eqp-micro-ic svg { width: 16px; height: 16px; }
.eqp-micro b { display: block; font-size: 12.5px; color: #171a21; }
.eqp-micro small { font-size: 11.5px; color: #8b93a8; }

.eqp-p { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; }
.eqp-p-h { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #f0f1f7; margin-bottom: 14px; }
.eqp-p-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.eqp-p-ic svg { width: 18px; height: 18px; }
.eqp-p-h > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.eqp-p-h b { font-size: 14.5px; color: #171a21; }
.eqp-p-h small { font-size: 11.5px; color: #8b93a8; }

.eqp-demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.eqp-miembros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.eqp-miembros li { display: flex; align-items: center; gap: 10px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 10px 12px; }
.eqp-miembros > li > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.eqp-miembros b { font-size: 12.5px; color: #171a21; font-weight: 650; }
.eqp-miembros small { font-size: 11px; color: #8b93a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqp-ava { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c, #6d28d9); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.eqp-ava--pend { background: #fff; color: #9aa2b6; border: 1.5px dashed #d8d3ee; }
.eqp-ava--mini { width: 24px; height: 24px; font-size: 9.5px; margin-right: 8px; display: inline-grid; vertical-align: middle; }

.eqp-rol { flex: none; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.eqp-rol--pro { color: #6d28d9; background: #f2edff; }
.eqp-rol--adm { color: #1d4ed8; background: #e6edff; }
.eqp-rol--enc { color: #0f766e; background: #d7f5f0; }
.eqp-rol--age { color: #475569; background: #eef1f6; }
.eqp-est { flex: none; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.eqp-est--ok { color: #15803d; background: #dcfce7; }
.eqp-est--pend { color: #b45309; background: #fef3c7; }

.eqp-form { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.eqp-campo { display: flex; flex-direction: column; gap: 5px; }
.eqp-campo > span { font-size: 11.5px; font-weight: 650; color: #5b6274; }
.eqp-campo > i { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-style: normal; font-size: 12.5px; color: #3d4356; background: #fbfaff; border: 1px solid #e6e8f0; border-radius: 10px; padding: 10px 12px; }
.eqp-campo > i.sel { color: #171a21; font-weight: 600; }
.eqp-campo > i svg { width: 14px; height: 14px; color: #9aa2b6; }
.eqp-roles-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.eqp-roles-pick em { font-style: normal; font-size: 12px; font-weight: 600; color: #5b6274; background: #fff; border: 1px solid #e6e8f0; border-radius: 999px; padding: 6px 13px; }
.eqp-roles-pick em.on { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.eqp-enviar { margin-top: 2px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; background: #6d28d9; border-radius: 11px; padding: 11px; }
.eqp-honesto { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0 0; font-size: 11.5px; line-height: 1.5; color: #77809a; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 11px 12px; }
.eqp-honesto-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f2edff; color: #6d28d9; display: grid; place-items: center; }
.eqp-honesto-ic svg { width: 12px; height: 12px; }

.eqp-vent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.eqp-v { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.eqp-v-ic { width: 38px; height: 38px; border-radius: 11px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; margin-bottom: 12px; }
.eqp-v-ic svg { width: 19px; height: 19px; }
.eqp-v h3 { font-size: 14.5px; font-weight: 700; color: #171a21; margin: 0 0 6px; }
.eqp-v p { font-size: 12.5px; line-height: 1.55; color: #5b6274; margin: 0; }

.eqp-p--ancha { padding: 18px 18px 14px; }
.eqp-tabla-wrap { overflow-x: auto; }
.eqp-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eqp-tabla th, .eqp-tabla td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #f0f1f7; white-space: nowrap; }
.eqp-tabla thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa2b6; border-bottom: 1px solid #e9ebf3; }
.eqp-tabla tbody tr:last-child th, .eqp-tabla tbody tr:last-child td { border-bottom: 0; }
.eqp-tabla tbody td { color: #5b6274; }
.eqp-tabla tbody td:first-child { color: #171a21; font-weight: 600; }

.eqp-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.eqp-picker > span { font-size: 12px; color: #8b93a8; margin-right: 3px; }
.eqp-pk { border: 1px solid #e6e8f0; background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600; color: #5b6274; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.eqp-pk:hover { border-color: #c4b5fd; background: #faf8ff; }
.eqp-pk.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }

.eqp-matriz-t tbody th { font-size: 12.5px; font-weight: 650; color: #171a21; white-space: normal; min-width: 190px; }
.eqp-matriz-t td { font-size: 11.5px; font-weight: 600; }
.eqp-matriz-t td.ok { color: #15803d; }
.eqp-matriz-t td.med { color: #b45309; }
.eqp-matriz-t td.no { color: #98a0b3; font-weight: 500; }
.eqp-matriz-t td::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 0; background: currentColor; }
.eqp-matriz-t td.no::before { border-radius: 2px; height: 2px; width: 9px; vertical-align: 4px; }
.eqp-matriz-t .is-col { background: #f7f4ff; }
.eqp-matriz-t thead .is-col { color: #6d28d9; }

.eqp-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #f0f1f7; }
.eqp-leyenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #77809a; }
.eqp-leyenda i { width: 9px; height: 9px; border-radius: 50%; }
.eqp-leyenda i.ok { background: #15803d; }
.eqp-leyenda i.med { background: #b45309; }
.eqp-leyenda i.no { background: #c3c9d6; border-radius: 2px; height: 2px; }
.eqp-leyenda em { flex: 1; min-width: 220px; font-style: normal; font-size: 11.5px; line-height: 1.5; color: #6d28d9; text-align: right; }

.eqp-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.eqp-pasos li { background: #fff; border: 1px solid #e9ebf3; border-radius: 15px; padding: 17px; }
.eqp-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #6d28d9; color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 11px; }
.eqp-pasos b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.eqp-pasos small { font-size: 11.5px; line-height: 1.5; color: #77809a; }

.eqp-seg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.eqp-seg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.eqp-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; flex: 1; }
.eqp-act li { position: relative; display: flex; gap: 12px; padding: 0 0 15px; }
.eqp-act li:last-child { padding-bottom: 0; }
.eqp-act i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ddd6fe; border: 2px solid #6d28d9; margin-top: 3px; }
.eqp-act li:not(:last-child) i::after { content: ''; position: absolute; left: 4px; top: 15px; bottom: 2px; width: 2px; background: #ece9f8; }
.eqp-act b { display: block; font-size: 12.5px; color: #171a21; font-weight: 620; line-height: 1.4; }
.eqp-act small { font-size: 11px; color: #9aa2b6; }

.eqp-nota { text-align: center; font-size: 12px; line-height: 1.5; color: #98a0b3; margin: 16px auto 0; max-width: 78ch; }

.eqp-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 24px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
/* Suelo claro para la marca: ver el porque en `.iac-cta-owl`. */
.eqp-cta-owl { width: 62px; height: 62px; border-radius: 16px; background: #fff; padding: 9px; object-fit: contain; }
.eqp-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.eqp-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.eqp-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.eqp-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.eqp-cta-btn svg { width: 17px; height: 17px; }
.eqp-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1080px) {
  .eqp-vent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eqp-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eqp-seg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .eqp-demo { grid-template-columns: minmax(0, 1fr); }
  .eqp-leyenda em { text-align: left; }
}
@media (max-width: 720px) {
  .eqp-micros, .eqp-vent, .eqp-pasos, .eqp-seg-cards { grid-template-columns: minmax(0, 1fr); }
  .eqp-cta { grid-template-columns: minmax(0, 1fr); }
  .eqp-cta-form { align-items: stretch; }
  .eqp-miembros li { flex-wrap: wrap; }
  .eqp-miembros > li > div { flex: 1 1 140px; }
}

/* Las cuatro fichas de rol. Van aquí abajo y no arriba con el resto del
   bloque porque se escribieron después: la primera versión de la página se
   quedó sin ellas y los iconos, sin medida, salían a pantalla completa. */
.eqp-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.eqp-r { background: #fff; border: 1px solid #e9ebf3; border-radius: 17px; padding: 18px; display: flex; flex-direction: column; }
.eqp-r-h { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid #f0f1f7; margin-bottom: 13px; }
.eqp-r-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); display: grid; place-items: center; }
.eqp-r-ic svg { width: 18px; height: 18px; }
.eqp-r-h > div { min-width: 0; flex: 1; }
.eqp-r-h h3 { font-size: 15.5px; font-weight: 700; color: #171a21; margin: 0 0 3px; letter-spacing: -.01em; }
.eqp-r-h small { display: block; font-size: 11.5px; line-height: 1.4; color: #8b93a8; }
.eqp-r ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.eqp-r li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.45; color: #3d4356; }
.eqp-ok, .eqp-no { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.eqp-ok { background: #dcfce7; color: #16a34a; }
.eqp-no { background: #f1f3f8; color: #98a0b3; }
.eqp-ok svg, .eqp-no svg { width: 9px; height: 9px; }
.eqp-r li:has(.eqp-no) { color: #77809a; }

@media (max-width: 1080px) { .eqp-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .eqp-roles { grid-template-columns: minmax(0, 1fr); } }

/* ════════════════════════════════════════════════════════════════════════════
   FONDO DE IA + MENÚ CON ÍNDICE DE LA PORTADA + PÁGINAS DE PLANTILLAS
   (añadido 2026-08-15, al final de la hoja como manda la casa)

   Tres cosas que llegan juntas:
   1) `.ai-bg`  — el lienzo fijo de la portada que crece con el scroll. Aquí
      solo está su sitio y su tamaño; TODO lo que se pinta lo decide ai-bg.js.
   2) `.mk-nav-idx` / `.mk-nav-plant` — los dos bloques nuevos de la primera
      columna del megamenú: el índice de la portada (filas compactas, sin
      frase) y el desglose de Plantillas (con su frase, como el resto del menú).
   3) `.tpl-*` — las dos páginas nuevas de Plantillas (Tu calendario y Tu
      presupuesto). Van aquí y no en línea porque es lo que hicieron las tres
      páginas anteriores del rediseño (`.cn-*`, `.cx-*`, `.cfg-*`).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · El lienzo del fondo ───────────────────────────────────────────────
   `z-index: -1` lo manda detrás de todo el contenido. Que se siga viendo y no
   quede tapado por el papel del <body> depende de un detalle del navegador que
   conviene dejar escrito: `html` NO tiene fondo propio, así que el de `body`
   se propaga al lienzo de la ventana y se pinta por DEBAJO de las capas
   negativas. El día que alguien le ponga un `background` a `html`, este fondo
   desaparece sin que salte ningún error. */
.ai-bg {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* ── 2 · Megamenú: índice de la portada y desglose de Plantillas ───────────
   La columna destacada trae ahora dos bloques, y con las entradas grandes de
   antes se iba de alto. El índice pasa a filas compactas —icono pequeño y
   título, sin frase— y Plantillas se queda en el tamaño normal del resto del
   menú. Los selectores repiten `.mk-nav-links` porque las reglas de site.css
   que hay que ganar también lo llevan. */
.mk-nav-col .mk-nav-h6-2 { margin-top: 13px; }

.mk-nav-links .mk-nav-col--hero .mk-nav-idx a {
  grid-template-columns: 22px 1fr; column-gap: 9px; padding: 5px 10px;
}
.mk-nav-col--hero .mk-nav-idx a .ic { width: 22px; height: 22px; border-radius: 7px; }
.mk-nav-col--hero .mk-nav-idx a .ic svg { width: 12px; height: 12px; }
.mk-nav-links .mk-nav-col--hero .mk-nav-idx a b { font-size: 13.5px; }

.mk-nav-links .mk-nav-col--hero .mk-nav-plant a {
  grid-template-columns: 26px 1fr; column-gap: 10px; padding: 7px 10px;
}
.mk-nav-col--hero .mk-nav-plant a .ic { width: 26px; height: 26px; border-radius: 8px; }
.mk-nav-col--hero .mk-nav-plant a .ic svg { width: 14px; height: 14px; }
.mk-nav-links .mk-nav-col--hero .mk-nav-plant a b { font-size: 13.5px; }

/* ── 3 · Páginas de Plantillas (Tu calendario · Tu presupuesto) ──────────── */

/* Galería de plantillas de la página de reservas */
.tpl-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 18px; }
.tpl-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #ece9f8; border-radius: 18px;
  box-shadow: 0 16px 40px -32px rgba(22, 24, 29, .3);
}
.tpl-b { padding: 15px 16px 17px; }
.tpl-h { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.tpl-h h3 { margin: 0; font-size: 16px; letter-spacing: -.02em; color: #171a21; }
.tpl-num {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: #6d28d9; background: #f0ecff; border-radius: 6px; padding: 3px 6px;
}
.tpl-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  color: #6d28d9; background: #f4f1fe; border: 1px solid #e6dffb;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.tpl-k { margin: 0 0 7px; font-size: 11.5px; font-weight: 700; color: #8a8fa1; }
.tpl-d { margin: 0; font-size: 13px; line-height: 1.55; color: #5b6274; }
.tpl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tpl-tags span {
  font-size: 10.5px; font-weight: 700; color: #77809a;
  background: #f6f6fb; border: 1px solid #eceef5; border-radius: 999px; padding: 3px 9px;
}
.tpl-tags .ok { color: #15803d; background: #ecfdf3; border-color: #d3f0dd; }
.tpl-tags .soon { color: #a16207; background: #fef7e6; border-color: #f3e4bd; }

/* Miniatura: un esquema del diseño con los colores reales de la plantilla.
   Todas se pintan con las mismas cuatro variables (--pb fondo, --pc tarjeta,
   --pa acento, --pt texto, --pl línea), así que añadir una plantilla es una
   línea de `style` en el HTML y no un bloque nuevo aquí. */
.tpl-mini {
  height: 122px; padding: 13px; background: var(--pb); border-bottom: 1px solid #ece9f8;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.tpl-mini .t { height: 7px; width: 46%; border-radius: 3px; background: var(--pt); opacity: .55; flex: none; }
.tpl-mini .b { height: 13px; border-radius: 5px; background: var(--pa); margin-top: auto; flex: none; }
.tpl-redondo .b { border-radius: 999px; }
.tpl-serif .tpl-mini .t { height: 8px; opacity: .7; }

.tpl-k-cal .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tpl-k-cal .g i { height: 11px; border-radius: 3px; background: var(--pc); border: 1px solid var(--pl, rgba(0, 0, 0, .07)); }
.tpl-k-cal .g i.on { background: var(--pa); border-color: var(--pa); }
.tpl-redondo.tpl-k-cal .g i { border-radius: 999px; }

.tpl-k-pasos .s { display: flex; align-items: center; gap: 6px; }
.tpl-k-pasos .s em {
  width: 13px; height: 13px; border-radius: 999px; flex: none;
  font-size: 8px; font-style: normal; font-weight: 800; line-height: 13px; text-align: center;
  color: #fff; background: var(--pa);
}
.tpl-k-pasos .s i { flex: 1; height: 6px; border-radius: 3px; background: var(--pc); border: 1px solid var(--pl, rgba(0, 0, 0, .08)); }

.tpl-k-lista .r { display: flex; align-items: center; gap: 6px; }
.tpl-k-lista .r i { width: 26px; height: 12px; border-radius: 4px; background: var(--pa); opacity: .85; flex: none; }
.tpl-k-lista .r u { flex: 1; height: 12px; border-radius: 4px; background: var(--pc); border: 1px solid var(--pl, rgba(0, 0, 0, .07)); }
.tpl-k-lista .r.eq { gap: 5px; }
.tpl-k-lista .r.eq o { width: 15px; height: 15px; border-radius: 999px; background: var(--pa); opacity: .55; display: block; }
.tpl-compacta .r i, .tpl-compacta .r u { height: 8px; }
.tpl-redondo.tpl-k-lista .r i, .tpl-redondo.tpl-k-lista .r u { border-radius: 999px; }

.tpl-k-bento { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 7px; }
.tpl-k-bento .bl { border-radius: 9px; background: var(--pc); border: 1px solid rgba(0, 0, 0, .06); }
.tpl-k-bento .b1 { background: var(--pa); opacity: .9; }
.tpl-k-bento .b4 { background: var(--pa); opacity: .35; }

.tpl-k-chat .bu { display: block; height: 17px; border-radius: 10px; flex: none; }
.tpl-k-chat .bu.in { width: 62%; background: var(--pc); border: 1px solid var(--pl, rgba(0, 0, 0, .07)); }
.tpl-k-chat .bu.out { width: 52%; margin-left: auto; background: var(--pa); opacity: .9; }
.tpl-k-chat .bu.sm { width: 40%; }

.tpl-k-movil { align-items: center; justify-content: center; }
.tpl-k-movil .ph {
  width: 62px; height: 96px; padding: 8px 7px; display: flex; flex-direction: column; gap: 5px;
  background: var(--pc); border: 1px solid var(--pl, rgba(0, 0, 0, .1)); border-radius: 11px;
}
.tpl-k-movil .ph .t { width: 70%; }
.tpl-k-movil .ph .ln { height: 6px; border-radius: 3px; background: var(--pt); opacity: .16; }
.tpl-k-movil .ph .ln.sm { width: 60%; }
.tpl-k-movil .ph .b { height: 12px; }

/* El configurador de la página de reservas (maqueta) */
.tpl-cfg { display: grid; gap: 12px; }
.tpl-cfg-c { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 13px; padding: 11px 13px; }
.tpl-cfg-h { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #98a0b3; margin-bottom: 8px; }
.tpl-sw { display: flex; gap: 7px; }
.tpl-sw i { width: 22px; height: 22px; border-radius: 8px; background: var(--s); border: 2px solid transparent; display: block; }
.tpl-sw i.on { border-color: #fff; box-shadow: 0 0 0 2px #6d28d9; }
.tpl-seg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tpl-seg:first-of-type { margin-top: 0; }
.tpl-seg span {
  font-size: 10.5px; font-weight: 650; color: #77809a;
  background: #fff; border: 1px solid #e9ebf3; border-radius: 999px; padding: 4px 10px;
}
.tpl-seg span.on { color: #fff; background: #6d28d9; border-color: #6d28d9; }
.tpl-blq { display: flex; flex-wrap: wrap; gap: 5px; }
.tpl-blq span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 650; color: #98a0b3;
  background: #fff; border: 1px solid #e9ebf3; border-radius: 8px; padding: 4px 9px;
}
.tpl-blq span.on { color: #171a21; border-color: #ddd4f7; background: #f6f3ff; }
.tpl-blq span b { color: #c3c8d6; font-weight: 700; }
.tpl-blq span.on b { color: #a78bfa; }
.tpl-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #f1eefb; }
.tpl-fila:last-child { border-bottom: 0; }
.tpl-fila span { color: #77809a; }
.tpl-fila b { color: #171a21; }

/* Las diez familias de presupuesto */
.tpl-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 18px; }
.tpl-fam {
  display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 15px; align-items: start;
  background: #fff; border: 1px solid #ece9f8; border-radius: 18px; padding: 15px 16px;
  box-shadow: 0 16px 40px -32px rgba(22, 24, 29, .3);
}
.tpl-fam-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tpl-fam-h h3 { margin: 0; font-size: 14.5px; line-height: 1.25; letter-spacing: -.02em; color: #171a21; }
.tpl-var { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tpl-var span {
  font-size: 10.5px; font-weight: 650; color: #5b6274;
  background: var(--fb); border: 1px solid rgba(0, 0, 0, .05); border-radius: 999px; padding: 3px 9px;
}

/* El folio en miniatura: proporción A4 de verdad (1 : 1,414). */
.tpl-paper {
  position: relative; overflow: hidden;
  width: 86px; aspect-ratio: 1 / 1.414;
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 9px; background: #fff;
  border: 1px solid #e7e4ef; border-radius: 5px;
  box-shadow: 0 6px 16px -10px rgba(22, 24, 29, .4);
}
.tpl-paper .tt { height: 6px; width: 58%; border-radius: 2px; background: var(--fa); opacity: .85; }
.tpl-paper .ln { height: 3.5px; border-radius: 2px; background: #dfe1ea; }
.tpl-paper .ln.sm { width: 62%; }
.tpl-paper .tot { margin-top: auto; height: 9px; width: 52%; align-self: flex-end; border-radius: 2px; background: var(--fa); }
.tpl-paper .lg { width: 15px; height: 15px; border-radius: 4px; background: var(--fb); border: 1px solid var(--fa); }
.tpl-k-total .tot { margin-top: 0; order: -1; align-self: flex-start; width: 62%; height: 12px; }
.tpl-k-banda .bd { position: absolute; left: 0; right: 0; top: 0; height: 17px; background: var(--fa); }
.tpl-k-banda .tt { margin-top: 12px; }
.tpl-k-marco .mc { position: absolute; inset: 4px; border: 1px solid var(--fa); border-radius: 3px; }
.tpl-k-organica .bl { position: absolute; right: -14px; top: -14px; width: 46px; height: 46px; border-radius: 999px; background: var(--fa); opacity: .3; }
.tpl-k-sobria .rg { height: 1px; background: var(--fa); opacity: .5; }
.tpl-k-bloque .bq { position: absolute; left: 0; right: 0; top: 0; height: 34px; background: var(--fa); }
.tpl-k-bloque .tt { margin-top: 28px; background: var(--fa); }
.tpl-k-cinta .ci {
  position: absolute; left: -18px; right: -18px; top: 15px; height: 9px; transform: rotate(-9deg);
  background: repeating-linear-gradient(115deg, var(--fa) 0 5px, #fff 5px 10px);
}
.tpl-k-cinta .tt { margin-top: 20px; }
.tpl-k-guirnalda .gu { position: absolute; left: 50%; top: -16px; width: 40px; height: 40px; margin-left: -20px; border: 2px solid var(--fa); border-radius: 999px; opacity: .45; }
.tpl-k-guirnalda .tt { margin-top: 12px; }
.tpl-k-tech .tc {
  position: absolute; left: 0; top: 0; bottom: 0; width: 15px;
  background: linear-gradient(180deg, var(--fa), var(--fb));
}
.tpl-k-tech .tt, .tpl-k-tech .ln, .tpl-k-tech .tot { margin-left: 11px; }
.tpl-k-belleza .be {
  position: absolute; inset: 0;
  background: radial-gradient(60px 40px at 78% 10%, var(--fb), transparent 70%),
              radial-gradient(50px 34px at 12% 88%, var(--fb), transparent 70%);
}
.tpl-k-belleza .tt, .tpl-k-belleza .ln, .tpl-k-belleza .tot { position: relative; }

/* La vista previa del presupuesto en la maqueta */
.tpl-a4 { background: #fff; border: 1px solid #eceef5; border-radius: 10px; padding: 15px 16px; }
.tpl-a4-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #6d28d9; }
.tpl-a4-h b { font-size: 14px; color: #171a21; }
.tpl-a4-h span { font-size: 11px; color: #77809a; }
.tpl-a4-para { display: flex; gap: 8px; align-items: baseline; margin: 11px 0; font-size: 11.5px; }
.tpl-a4-para span { color: #98a0b3; }
.tpl-a4-para b { color: #171a21; }
.tpl-a4-tr { display: grid; grid-template-columns: minmax(0, 1fr) 44px 74px; gap: 8px; font-size: 11.5px; padding: 6px 0; border-bottom: 1px solid #f1f2f6; }
.tpl-a4-tr span:nth-child(2), .tpl-a4-tr span:nth-child(3) { text-align: right; }
.tpl-a4-tr.th { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #98a0b3; }
.tpl-a4-tot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding: 9px 12px; background: #f6f3ff; border-radius: 9px; }
.tpl-a4-tot span { font-size: 11.5px; font-weight: 700; color: #5b6274; }
.tpl-a4-tot b { font-size: 17px; color: #6d28d9; }
.tpl-a4-cond { margin-top: 10px; font-size: 10.5px; line-height: 1.5; color: #98a0b3; }

/* Los cuatro pasos, compartidos por las dos páginas */
.tpl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 16px; }
.tpl-step { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 18px; padding: 20px 20px 22px; }
.tpl-step .n { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #a78bfa; margin-bottom: 9px; }
.tpl-step h3 { margin: 0 0 7px; font-size: 16px; letter-spacing: -.02em; color: #171a21; }
.tpl-step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5b6274; }

.tpl-fine { font-size: 13px; color: #d8cdf5; margin: 14px 0 0; }
.tpl-fine a { color: #fff; font-weight: 700; text-decoration: underline; }

/* Las dos maquetas del cierre */
.tpl-fone { width: 100%; max-width: 268px; margin: 0 auto; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 26px 60px -30px rgba(22, 24, 29, .55); }
.tpl-fone-bar { display: flex; justify-content: center; padding: 4px 0 9px; }
.tpl-fone-bar i { width: 46px; height: 4px; border-radius: 999px; background: #e7e4ef; }
.tpl-fone-bd { padding: 2px 6px 8px; }
.tpl-fone-bd > b { display: block; font-size: 15px; color: #171a21; }
.tpl-fone-bd > span { display: block; font-size: 12px; color: #77809a; margin-top: 2px; }
.tpl-fone-sv { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 11px; background: #fbfaff; border: 1px solid #ece9f8; border-radius: 11px; font-size: 12.5px; color: #171a21; }
.tpl-fone-sv em { font-style: normal; font-size: 11px; color: #77809a; }
.tpl-fone-hs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
.tpl-fone-hs i { font-style: normal; text-align: center; font-size: 11px; font-weight: 650; color: #5b6274; background: #fff; border: 1px solid #e9ebf3; border-radius: 8px; padding: 6px 0; }
.tpl-fone-hs i.on { color: #fff; background: #6d28d9; border-color: #6d28d9; }
.tpl-fone-bt { display: block; margin-top: 11px; text-align: center; font-size: 12.5px; font-weight: 700; color: #fff; background: #6d28d9; border-radius: 10px; padding: 10px 0; }

.tpl-env { width: 100%; max-width: 320px; margin: 0 auto; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 26px 60px -30px rgba(22, 24, 29, .55); }
.tpl-env-h { padding: 13px 15px; border-bottom: 1px solid #eceef5; }
.tpl-env-h span { display: block; font-size: 11px; color: #98a0b3; }
.tpl-env-h b { display: block; font-size: 13.5px; color: #171a21; margin-top: 3px; }
.tpl-env-bd { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 13px; align-items: center; padding: 14px 15px; }
.tpl-env-doc { display: flex; flex-direction: column; gap: 4px; height: 90px; padding: 8px 7px; background: #fff; border: 1px solid #e7e4ef; border-radius: 4px; box-shadow: 0 5px 14px -9px rgba(22, 24, 29, .4); }
.tpl-env-doc .tt { height: 5px; width: 60%; border-radius: 2px; background: #6d28d9; }
.tpl-env-doc .ln { height: 3px; border-radius: 2px; background: #e4e6ee; }
.tpl-env-doc .ln.sm { width: 55%; }
.tpl-env-doc .tot { margin-top: auto; height: 8px; width: 60%; align-self: flex-end; border-radius: 2px; background: #6d28d9; }
.tpl-env-ac { display: flex; flex-direction: column; gap: 7px; }
.tpl-env-ac span { text-align: center; font-size: 12px; font-weight: 650; color: #5b6274; background: #fff; border: 1px solid #e9ebf3; border-radius: 9px; padding: 8px 0; }
.tpl-env-ac .ok { color: #fff; background: #6d28d9; border-color: #6d28d9; font-weight: 700; }
.tpl-env-ft { padding: 10px 15px; font-size: 11px; color: #98a0b3; background: #fbfaff; border-top: 1px solid #eceef5; }

@media (max-width: 620px) {
  .tpl-fam { grid-template-columns: minmax(0, 1fr); }
  .tpl-paper { width: 74px; }
}

/* ══ PÁGINA «ANALÍTICA» ══════════════════════════════════════════════════════
   El panel con sus pestañas, las ocho métricas, el bloque de evidencia
   (confirmado / inferido / pendiente), el recorrido completo y los informes.
   El prefijo es `.anl-`. */
.anl-hero { padding-bottom: 6px; }
.anl-hero-in { text-align: center; max-width: 880px; margin: 0 auto; }
.anl-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 18px; }
.anl-hero-in h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.anl-hero-sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: #5b6274; margin: 0 auto 24px; max-width: 680px; }
.anl-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 20px; }
.anl-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.anl-ticks span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #5b6274; }
.anl-ticks i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #ede9fe; color: #6d28d9; display: grid; place-items: center; }
.anl-ticks i svg { width: 10px; height: 10px; }

.anl-p { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; }
.anl-p-h { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #f0f1f7; margin-bottom: 14px; }
.anl-p-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.anl-p-ic svg { width: 18px; height: 18px; }
.anl-p-h > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.anl-p-h b { font-size: 14.5px; color: #171a21; }
.anl-p-h small { font-size: 11.5px; color: #8b93a8; }

.anl-p--demo { padding: 18px 20px 20px; }
.anl-demo-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #f0f1f7; margin-bottom: 16px; }
.anl-demo-h b { display: block; font-size: 15px; color: #171a21; }
.anl-demo-h small { font-size: 11.5px; color: #8b93a8; }
.anl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.anl-tab { border: 1px solid #e6e8f0; background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600; color: #5b6274; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.anl-tab:hover { border-color: #c4b5fd; background: #faf8ff; }
.anl-tab.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.anl-panel + .anl-panel { margin-top: 18px; }

.anl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.anl-k { background: #fbfaff; border: 1px solid #f0eefb; border-radius: 13px; padding: 14px; }
.anl-k small { display: block; font-size: 11.5px; color: #8b93a8; margin-bottom: 5px; }
.anl-k b { display: block; font-size: 22px; font-weight: 800; color: #171a21; letter-spacing: -.025em; }
.anl-k em, .anl-m em { font-style: normal; font-size: 11.5px; font-weight: 700; }
.sube { color: #15803d; }
.baja { color: #1d4ed8; }

.anl-graf { background: #fbfaff; border: 1px solid #f0eefb; border-radius: 13px; padding: 14px; }
.anl-graf-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.anl-graf-h b { font-size: 12.5px; color: #171a21; }
.anl-graf-h span { font-size: 11.5px; color: #8b93a8; }
.anl-barras { display: flex; align-items: flex-end; gap: 4px; height: 118px; }
.anl-barras i { flex: 1; min-width: 0; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #a78bfa, #6d28d9); }
.anl-graf-x { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; }
.anl-graf-x span { font-size: 10.5px; color: #9aa2b6; text-align: center; }

.anl-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.anl-h4 { font-size: 12.5px; font-weight: 700; color: #171a21; margin: 0 0 10px; }
.anl-h4 + .anl-h4, .anl-chips + .anl-h4 { margin-top: 18px; }
.anl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.anl-lista li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; align-items: center; gap: 10px; font-size: 12px; }
.anl-lista b { font-weight: 600; color: #3d4356; }
.anl-bar { height: 7px; border-radius: 999px; background: #ece9f8; overflow: hidden; }
.anl-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.anl-lista em { font-style: normal; font-weight: 700; color: #171a21; text-align: right; }
.anl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.anl-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #5b6274; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 999px; padding: 5px 11px; }
.anl-chips em { font-style: normal; font-weight: 700; color: #6d28d9; }
.anl-huecos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.anl-huecos li { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 11px; }
.anl-huecos b { display: block; font-size: 12px; color: #92400e; font-weight: 620; }
.anl-huecos small { font-size: 10.5px; color: #b45309; }
.anl-nota-in { font-size: 11.5px; line-height: 1.5; color: #8b93a8; margin: 0 0 9px; }
.anl-nota-in a { color: #6d28d9; font-weight: 600; }

.anl-tabla-wrap { overflow-x: auto; }
.anl-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.anl-tabla th, .anl-tabla td { text-align: right; padding: 10px 12px; border-bottom: 1px solid #f0f1f7; white-space: nowrap; color: #5b6274; }
.anl-tabla thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; border-bottom: 1px solid #e9ebf3; }
.anl-tabla th:first-child, .anl-tabla thead th:first-child { text-align: left; }
.anl-tabla tbody th { color: #171a21; font-weight: 650; }
.anl-conv { font-weight: 700; color: #6d28d9 !important; }
.anl-total th, .anl-total td { border-bottom: 0; border-top: 1.5px solid #e9ebf3; font-weight: 700; color: #171a21; }

.anl-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.anl-embudo li { position: relative; display: flex; align-items: center; gap: 12px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 12px 14px; overflow: hidden; }
.anl-emb-b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(90deg, rgba(124, 58, 237, .14), rgba(167, 139, 250, .07)); }
.anl-embudo > li > div { position: relative; min-width: 0; flex: 1; }
.anl-embudo b { display: block; font-size: 13px; color: #171a21; font-weight: 650; }
.anl-embudo small { font-size: 11px; color: #8b93a8; }
.anl-embudo em { position: relative; flex: none; font-style: normal; font-size: 15px; font-weight: 800; color: #171a21; letter-spacing: -.02em; }
.anl-pc { position: relative; flex: none; min-width: 52px; text-align: right; font-size: 11.5px; font-weight: 700; color: #6d28d9; }
.anl-ev { position: relative; flex: none; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.anl-ev--ok { color: #15803d; background: #dcfce7; }
.anl-ev--inf { color: #b45309; background: #fef3c7; }
.anl-ev--pend { color: #475569; background: #eef1f6; }

.anl-vent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.anl-v { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.anl-v-ic { width: 38px; height: 38px; border-radius: 11px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; margin-bottom: 12px; }
.anl-v-ic svg { width: 19px; height: 19px; }
.anl-v h3 { font-size: 14.5px; font-weight: 700; color: #171a21; margin: 0 0 6px; }
.anl-v p { font-size: 12.5px; line-height: 1.55; color: #5b6274; margin: 0; }

.anl-metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.anl-m { background: #fff; border: 1px solid #e9ebf3; border-radius: 14px; padding: 15px; }
.anl-m small { display: block; font-size: 11.5px; color: #8b93a8; margin-bottom: 5px; }
.anl-m b { display: block; font-size: 21px; font-weight: 800; color: #171a21; letter-spacing: -.025em; margin-bottom: 3px; }

.anl-evid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.anl-e { border-radius: 17px; padding: 20px; border: 1.5px solid; }
.anl-e-pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; margin-bottom: 12px; }
.anl-e h3 { font-size: 16px; font-weight: 700; color: #171a21; margin: 0 0 7px; letter-spacing: -.01em; }
.anl-e p { font-size: 12.5px; line-height: 1.55; color: #5b6274; margin: 0 0 10px; }
.anl-e small { display: block; font-size: 11.5px; font-weight: 650; }
.anl-e--ok { background: #f4fdf7; border-color: #cfeddb; }
.anl-e--ok .anl-e-pill { color: #15803d; background: #dcfce7; }
.anl-e--ok small { color: #15803d; }
.anl-e--inf { background: #fffcf2; border-color: #fbe4a8; }
.anl-e--inf .anl-e-pill { color: #b45309; background: #fef3c7; }
.anl-e--inf small { color: #b45309; }
.anl-e--pend { background: #fafbfd; border-color: #e3e7ef; }
.anl-e--pend .anl-e-pill { color: #475569; background: #eef1f6; }
.anl-e--pend small { color: #64748b; }

.anl-regla { display: flex; align-items: center; gap: 16px; margin-top: 16px; background: #f5f3ff; border: 1px solid #e9e3ff; border-radius: 18px; padding: 18px 22px; }
.anl-regla-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; background: #fff; color: #6d28d9; display: grid; place-items: center; }
.anl-regla-ic svg { width: 22px; height: 22px; }
.anl-regla p { font-size: 13.5px; line-height: 1.6; color: #5b6274; margin: 0; }
.anl-regla b { color: #171a21; }

.anl-cadena { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.anl-cadena span { font-size: 12.5px; font-weight: 650; color: #5b6274; background: #fff; border: 1px solid #e9ebf3; border-radius: 999px; padding: 8px 15px; }
.anl-cadena i { width: 16px; height: 2px; border-radius: 2px; background: #d8d3ee; }

.anl-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.anl-inf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.anl-inf li { background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 10px 12px; }
.anl-inf b { display: block; font-size: 12.5px; color: #171a21; font-weight: 650; }
.anl-inf small { font-size: 11px; line-height: 1.45; color: #8b93a8; }
.anl-formatos { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0; }
.anl-formatos span { font-size: 10.5px; font-weight: 700; color: #6d28d9; background: #f2edff; border-radius: 6px; padding: 4px 9px; }
.anl-ver { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 12px; font-size: 12.5px; font-weight: 650; color: #6d28d9; text-decoration: none; }
.anl-ver svg { width: 14px; height: 14px; }
.anl-ver:hover { text-decoration: underline; }

.anl-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.anl-pasos li { background: #fff; border: 1px solid #e9ebf3; border-radius: 15px; padding: 17px; }
.anl-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #6d28d9; color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 11px; }
.anl-pasos b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.anl-pasos small { font-size: 11.5px; line-height: 1.5; color: #77809a; }

.anl-nota { text-align: center; font-size: 12px; line-height: 1.5; color: #98a0b3; margin: 16px auto 0; max-width: 78ch; }

.anl-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 24px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
/* Suelo claro para la marca: ver el porque en `.iac-cta-owl`. */
.anl-cta-owl { width: 62px; height: 62px; border-radius: 16px; background: #fff; padding: 9px; object-fit: contain; }
.anl-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.anl-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.anl-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.anl-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.anl-cta-btn svg { width: 17px; height: 17px; }
.anl-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1080px) {
  .anl-vent, .anl-tres, .anl-evid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anl-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anl-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .anl-dos { grid-template-columns: minmax(0, 1fr); }
  .anl-embudo li { flex-wrap: wrap; }
  .anl-embudo > li > div { flex: 1 1 150px; }
}
@media (max-width: 720px) {
  .anl-vent, .anl-tres, .anl-evid, .anl-pasos { grid-template-columns: minmax(0, 1fr); }
  .anl-regla { flex-direction: column; align-items: flex-start; }
  .anl-cta { grid-template-columns: minmax(0, 1fr); }
  .anl-cta-form { align-items: stretch; }
  .anl-lista li { grid-template-columns: minmax(0, 1fr) 60px 40px; }
}

/* ══ PÁGINA «SEDES Y RECURSOS» ═══════════════════════════════════════════════
   Los tres paneles —lista de sedes, detalle con pestañas y ficha del local—,
   las seis piezas, las ocho cosas que se organizan y la vista operativa.
   El prefijo es `.sdr-`. */
.sdr-hero { padding-bottom: 6px; }
.sdr-hero-in { text-align: center; max-width: 880px; margin: 0 auto; }
.sdr-chip { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6d28d9; padding: 6px 0; margin-bottom: 18px; }
.sdr-hero-in h1 { font-family: var(--font-display, inherit); font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; color: #171a21; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; }
.sdr-hero-sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: #5b6274; margin: 0 auto 24px; max-width: 680px; }
.sdr-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.sdr-micros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sdr-micro { display: flex; align-items: center; gap: 10px; text-align: left; background: #fff; border: 1px solid #e9ebf3; border-radius: 13px; padding: 12px 14px; }
.sdr-micro-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.sdr-micro-ic svg { width: 16px; height: 16px; }
.sdr-micro b { display: block; font-size: 12.5px; color: #171a21; }
.sdr-micro small { font-size: 11.5px; color: #8b93a8; }

.sdr-p { background: #fff; border: 1px solid #e9ebf3; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; }
.sdr-p-h { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #f0f1f7; margin-bottom: 14px; }
.sdr-p-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; }
.sdr-p-ic svg { width: 18px; height: 18px; }
.sdr-p-h > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sdr-p-h b { font-size: 14.5px; color: #171a21; }
.sdr-p-h small { font-size: 11.5px; color: #8b93a8; }

.sdr-demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }

.sdr-sedes { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sdr-sede { display: flex; align-items: center; gap: 10px; text-align: left; background: #fbfaff; border: 1.5px solid #f0eefb; border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s; }
.sdr-sede:hover { border-color: #d6ccff; background: #f8f5ff; }
.sdr-sede.is-sel { border-color: #6d28d9; background: #fff; box-shadow: 0 8px 24px rgba(109, 40, 217, .12); }
.sdr-pin { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #f2edff; position: relative; }
.sdr-pin::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid #6d28d9; }
.sdr-sede-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sdr-sede-tx b { font-size: 13px; color: #171a21; font-weight: 650; }
.sdr-sede-tx small { font-size: 10.5px; color: #8b93a8; }
.sdr-sede-oc { flex: none; font-size: 11.5px; font-weight: 700; color: #6d28d9; }

.sdr-det-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 13px; border-bottom: 1px solid #f0f1f7; margin-bottom: 12px; }
.sdr-det-h > div { min-width: 0; flex: 1; }
.sdr-det-h b { display: block; font-size: 16px; color: #171a21; letter-spacing: -.01em; }
.sdr-det-h small { display: block; font-size: 11.5px; color: #8b93a8; }
.sdr-tz { flex: none; font-size: 10.5px; font-weight: 700; color: #1d4ed8; background: #e6edff; border-radius: 999px; padding: 4px 10px; }
.sdr-abierta { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 4px 10px; }
.sdr-abierta i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.sdr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sdr-tab { border: 1px solid #e6e8f0; background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: #5b6274; cursor: pointer; transition: border-color .14s, background .14s, color .14s; }
.sdr-tab:hover { border-color: #c4b5fd; background: #faf8ff; }
.sdr-tab.is-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.sdr-det-bd { flex: 1; }
.sdr-h4 { font-size: 12px; font-weight: 700; color: #171a21; margin: 0 0 9px; }
.sdr-h4 + .sdr-res + .sdr-h4, .sdr-cont + .sdr-h4 { margin-top: 16px; }

.sdr-res { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sdr-res li { display: flex; align-items: center; gap: 11px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 10px; padding: 9px 11px; }
.sdr-res em { flex: none; font-style: normal; font-size: 12px; font-weight: 800; color: #6d28d9; min-width: 40px; }
.sdr-res b { display: block; font-size: 12px; color: #171a21; font-weight: 620; }
.sdr-res small { font-size: 10.5px; color: #8b93a8; }

.sdr-cont { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sdr-cont li { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(70px, 1.2fr); align-items: center; gap: 10px; font-size: 12px; }
.sdr-cont b { font-weight: 600; color: #3d4356; }
.sdr-cont em { font-style: normal; font-weight: 700; color: #171a21; text-align: right; }
.sdr-bar { height: 7px; border-radius: 999px; background: #ece9f8; overflow: hidden; display: block; }
.sdr-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.sdr-bar--g { height: 9px; }

.sdr-datos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sdr-datos li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 10px; padding: 9px 11px; }
.sdr-datos span { flex: none; font-size: 11.5px; color: #8b93a8; }
.sdr-datos b { font-size: 12px; color: #171a21; text-align: right; }
.sdr-rep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.sdr-rep li { background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 12px; }
.sdr-rep small { display: block; font-size: 11px; color: #8b93a8; margin-bottom: 3px; }
.sdr-rep b { font-size: 18px; font-weight: 800; color: #171a21; letter-spacing: -.02em; }

.sdr-plano { border-radius: 14px; overflow: hidden; margin-bottom: 13px; }
.sdr-plano svg { display: block; width: 100%; height: auto; }
.sdr-ficha-n { font-size: 16px; font-weight: 700; color: #171a21; margin: 0 0 11px; letter-spacing: -.01em; }
.sdr-ficha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sdr-ficha li { display: flex; flex-direction: column; gap: 2px; }
.sdr-ficha span { font-size: 10.5px; color: #9aa2b6; }
.sdr-ficha b { font-size: 12.5px; color: #171a21; font-weight: 620; line-height: 1.4; }
.sdr-ocup { margin-top: 14px; padding-top: 13px; border-top: 1px solid #f0f1f7; }
.sdr-ocup-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sdr-ocup-h b { font-size: 12.5px; color: #171a21; }
.sdr-ocup-h em { font-style: normal; font-size: 14px; font-weight: 800; color: #6d28d9; }

.sdr-vent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sdr-v { background: #fff; border: 1px solid #e9ebf3; border-radius: 16px; padding: 18px; }
.sdr-v-ic { width: 38px; height: 38px; border-radius: 11px; background: #f5f3ff; color: #6d28d9; display: grid; place-items: center; margin-bottom: 12px; }
.sdr-v-ic svg { width: 19px; height: 19px; }
.sdr-v h3 { font-size: 14.5px; font-weight: 700; color: #171a21; margin: 0 0 6px; }
.sdr-v p { font-size: 12.5px; line-height: 1.55; color: #5b6274; margin: 0; }

.sdr-org { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.sdr-o { background: #fbfaff; border: 1px solid #ece9f8; border-radius: 14px; padding: 15px; }
.sdr-o-ic { width: 32px; height: 32px; border-radius: 9px; background: #fff; border: 1px solid #ece9f8; color: #6d28d9; display: grid; place-items: center; margin-bottom: 10px; }
.sdr-o-ic svg { width: 16px; height: 16px; }
.sdr-o b { display: block; font-size: 13px; color: #171a21; margin-bottom: 4px; }
.sdr-o small { font-size: 11.5px; line-height: 1.5; color: #77809a; }

.sdr-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sdr-pasos li { background: #fff; border: 1px solid #e9ebf3; border-radius: 15px; padding: 17px; }
.sdr-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #6d28d9; color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 11px; }
.sdr-pasos b { display: block; font-size: 13.5px; color: #171a21; margin-bottom: 5px; }
.sdr-pasos small { font-size: 11.5px; line-height: 1.5; color: #77809a; }

.sdr-tabla-wrap { overflow-x: auto; }
.sdr-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sdr-tabla th, .sdr-tabla td { text-align: right; padding: 11px 12px; border-bottom: 1px solid #f0f1f7; white-space: nowrap; color: #5b6274; }
.sdr-tabla thead th { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa2b6; border-bottom: 1px solid #e9ebf3; }
.sdr-tabla th:first-child, .sdr-tabla thead th:first-child { text-align: left; }
.sdr-tabla tbody th { color: #171a21; font-weight: 650; }
.sdr-tabla tbody tr:last-child th, .sdr-tabla tbody tr:last-child td { border-bottom: 0; }
.sdr-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.sdr-tag--alta { color: #15803d; background: #dcfce7; }
.sdr-tag--media { color: #b45309; background: #fef3c7; }
.sdr-tag--baja { color: #475569; background: #eef1f6; }

.sdr-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.sdr-asig, .sdr-pers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sdr-asig li, .sdr-pers li { display: flex; align-items: center; gap: 10px; background: #fbfaff; border: 1px solid #f0eefb; border-radius: 11px; padding: 10px 12px; }
.sdr-asig > li > div, .sdr-pers > li > div { min-width: 0; flex: 1; }
.sdr-asig b, .sdr-pers b { display: block; font-size: 12.5px; color: #171a21; font-weight: 650; }
.sdr-asig small, .sdr-pers small { font-size: 10.5px; color: #8b93a8; }
.sdr-a-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f2edff; color: #6d28d9; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.sdr-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c, #6d28d9); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.sdr-est { flex: none; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.sdr-est--libre { color: #15803d; background: #dcfce7; }
.sdr-est--ocupado { color: #b45309; background: #fef3c7; }
.sdr-est--pronto { color: #1d4ed8; background: #e6edff; }
.sdr-est--fuera { color: #475569; background: #eef1f6; }

.sdr-nota-in { font-size: 11.5px; line-height: 1.5; color: #8b93a8; margin: 12px 0 0; }
.sdr-nota { text-align: center; font-size: 12px; line-height: 1.5; color: #98a0b3; margin: 16px auto 0; max-width: 78ch; }

.sdr-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 24px; align-items: center; background: linear-gradient(115deg, #6d28d9, #7c3aed 55%, #8b5cf6); border-radius: 22px; padding: clamp(24px, 3.4vw, 38px); color: #fff; }
/* Suelo claro para la marca: ver el porque en `.iac-cta-owl`. */
.sdr-cta-owl { width: 62px; height: 62px; border-radius: 16px; background: #fff; padding: 9px; object-fit: contain; }
.sdr-cta-tx h2 { font-family: var(--font-display, inherit); font-size: clamp(21px, 2.6vw, 29px); font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.sdr-cta-tx p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, .86); }
.sdr-cta-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sdr-cta-btn { background: #fff !important; color: #6d28d9 !important; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.sdr-cta-btn svg { width: 17px; height: 17px; }
.sdr-cta-form small { font-size: 11.5px; color: rgba(255, 255, 255, .78); }

@media (max-width: 1180px) {
  .sdr-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sdr-p--ficha { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .sdr-vent, .sdr-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sdr-org { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sdr-demo, .sdr-dos { grid-template-columns: minmax(0, 1fr); }
  .sdr-p--ficha { grid-column: auto; }
}
@media (max-width: 720px) {
  .sdr-micros, .sdr-vent, .sdr-pasos, .sdr-org { grid-template-columns: minmax(0, 1fr); }
  .sdr-cta { grid-template-columns: minmax(0, 1fr); }
  .sdr-cta-form { align-items: stretch; }
  .sdr-cont li { grid-template-columns: minmax(0, 1fr) 50px; }
  .sdr-cont .sdr-bar { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LA BARRA DE ANUNCIO, QUE NADIE HA VISTO NUNCA.
   ════════════════════════════════════════════════════════════════════════════
   MEDIDO, no supuesto: `.mk-topbar` ocupa (0,0) con 40 px de alto en escritorio
   y 85 en móvil —ahí se pone en dos líneas—, y `.mk-nav` es `position:fixed;
   top:0; z-index:100`. O sea que la cabecera se pone ENCIMA de la barra y la
   tapa entera. En escritorio no se ha visto jamás; en móvil asoma el trozo de
   abajo de la segunda línea, cortado a media altura, y parece un error de
   pintado. Comprobado con `elementFromPoint` en el centro de la barra: quien
   está delante es la cabecera.

   Un bloque que existe, ocupa sitio y no se ve nunca es peor que no tenerlo:
   alguien lo escribió, alguien lo mantiene, y no le llega a nadie.

   EL ARREGLO ES QUE LA CABECERA DEJE DE SER `fixed` Y PASE A `sticky`, que es
   lo que hace falta para que algo pueda ir POR ENCIMA de ella en el flujo. Una
   cabecera `sticky` ocupa su sitio, así que la barra se lee arriba del todo, se
   va al bajar, y la cabecera se queda pegada — que es lo que espera cualquiera.

   VA ACOTADO POR LA ESTRUCTURA con `.mk-topbar + .mk-nav`: la cabecera es la
   hermana inmediata de la barra. Sin ese `+`, las otras veintiocho páginas —que
   no tienen barra— se comerían un salto de 67 px por un arreglo que no les toca.

   CUÁNTAS PÁGINAS SON, contadas y no supuestas: TRES. `landing.html`,
   `funciones-plantillas-de-calendario.html` y `funciones-plantillas-de-
   presupuesto.html`. Aquí llegué a escribir que la barra «solo existe en la
   portada, comprobado en las diez páginas grandes», y era falso — no lo había
   contado. Las tres tienen la misma estructura y el mismo fallo de la barra
   enterrada, así que la regla las arregla a las tres; pero lo que valía era
   contar, no el adjetivo.

   El `padding-top` del hero baja a 8 px porque ya no hay que compensar nada: la
   cabecera `sticky` ocupa su hueco de verdad en vez de flotar por encima. */
.mk-topbar + .mk-nav {
  position: sticky;
}
.mk-topbar ~ .mk-hero {
  padding-top: 8px;
}
/* LA FRANJA VA EN TODAS LAS PÁGINAS (2026-10-03: «este banner quiero que esté
   para todas las páginas»). En cada una, el primer bloque dejaba 71 px de
   más arriba para que la cabecera FIJA no le tapara nada; con la franja
   delante la cabecera es sticky y ocupa su sitio, así que esos 71 sobran:
   cada número de aquí es el de antes menos 71. El contenido queda a la misma
   distancia de la barra que tenía; sólo baja lo que mide la franja. */
.mk-topbar ~ .au-main { padding-top: 59px; }              /* 130 − 71 */
.mk-topbar ~ main.legal { padding-top: 59px; }            /* 130 − 71 */
.mk-topbar ~ .au-main .au-dibujo { top: -51px; }          /* 20 − 71 */
@media (max-width: 980px) {
  .mk-topbar ~ .au-main { padding-top: 33px; }            /* 104 − 71 */
}
@media (min-width: 980.02px) and (max-height: 600px) {
  body.es-acceso .mk-topbar ~ .au-main { padding-top: 25px; }   /* 96 − 71 */
}
/* EL MENÚ MÓVIL VIVE DENTRO DE LA CABECERA. Con `fixed` flotaba sobre la página;
   con `sticky` la cabecera está en el FLUJO, así que abrir el menú la hacía
   crecer de 67 a 449 px y empujaba la página entera 382 px hacia abajo —el hero
   se iba de y=152 a y=534— cada vez que alguien tocaba las tres rayas. Se saca
   del flujo dentro de la cabecera, que al ser `sticky` ya es bloque contenedor.
   Y el tope de alto se recalcula: el de `site.css` (`100vh - 66px`) se escribió
   para una barra clavada en y=0, y aquí el menú arranca por debajo de la barra
   de anuncio, así que se pasaba de pantalla justo esos píxeles. 152 = la barra
   más alta que llega a verse (85 px, medida a 360, 390 y 520) más la cabecera
   (67). Es CONSERVADOR a propósito: si la barra es más baja o ya se ha ido con
   el scroll, el menú queda más corto de lo que podría — y eso no se nota,
   porque el panel ya scrollea él solo. Lo contrario sí se nota: filas que no
   hay forma de alcanzar. */
.mk-topbar + .mk-nav .mk-mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - 152px);
}

/* ── EL FORMULARIO DEL HERO A 390 ────────────────────────────────────────────
   El botón se comía el texto del campo: «Escribe tu email de trab». La píldora
   horizontal de escritorio no cabe en un teléfono, así que en móvil deja de ser
   una píldora — campo arriba, botón abajo, los dos a todo el ancho. */
@media (max-width: 620px) {
  .mk-heromail {
    flex-direction: column; align-items: stretch; gap: 10px;
    border-radius: 20px; padding: 12px;
  }
  .mk-heromail input { padding: 12px 12px 12px 10px; font-size: 16px; }
  .mk-heromail button { width: 100%; padding: 14px 18px; font-size: 16px; }
}

/* ── EL AVISO DEL FORMULARIO ─────────────────────────────────────────────────
   Hasta ahora el único error que veía el visitante era la burbuja nativa del
   navegador, que ni es nuestra ni dice lo que queremos. Y con el campo VACÍO no
   había aviso ninguno: se le dejaba pasar.
   Sin sacudidas, ni iconos rojos, ni sombra: sólo que el fallo sea inequívoco. */
.mk-heromail.has-error { border-color: #dc2626; }
.mk-heromail-error {
  width: min(620px, 92vw); margin: 0 auto; padding-left: 24px;
  color: #b91c1c; font-size: 13px; font-weight: 600; text-align: left;
}
/* SE OCULTA VACIÁNDOLO, NO CON `display: none`. El párrafo tiene que estar
   SIEMPRE pintado y en el árbol de accesibilidad, porque una región viva sólo
   se anuncia si ya estaba montada cuando cambia su contenido; `hidden` —o un
   `display:none`— la saca del árbol y el primer aviso se pierde. Vacío, un
   bloque sin contenido no genera caja de línea: ocupa cero y no se ve. El
   margen negativo, que es lo único que sí se notaría en vacío, se aplica sólo
   cuando hay texto. */
.mk-heromail-error:not(:empty) { margin-top: -8px; }

/* ── LA MAQUETA DEL HERO POR DEBAJO DE 880 ───────────────────────────────────
   LO QUE PASABA: a 520 px o menos, `site.css` escondía la columna de canales y
   la del chat, dejaba solo la LISTA de conversaciones… y mantenía la caja a
   `height: 380px` fija. Con dos conversaciones dentro, eso son doscientos y
   pico píxeles de blanco dentro de una tarjeta con sombra — que no parece un
   hueco de diseño, parece que algo no ha cargado. Y lo que enseñaba era lo
   menos interesante de las tres columnas: una lista de nombres, sin demostrar
   que Cuho haga nada.

   LO QUE SE HACE: se invierte. Se enseña UNA CONVERSACIÓN ENTERA —quién
   escribe, por qué canal, lo que se dijo y lo que Cuho hizo— y se esconde la
   lista. Es la misma maqueta y el mismo dato: cambia cuál de sus tres columnas
   sobrevive, y sobrevive la que demuestra el producto.

   Y EL ALTO PASA A SER AUTOMÁTICO. Una altura fija que no depende del contenido
   solo puede acabar en dos sitios: sobra hueco o falta.

   POR QUÉ 880 Y NO 520. Arreglar solo el teléfono dejaba ROTA la banda de 521 a
   880 — todas las tabletas—, y ahí `site.css` pone `112px 1fr` con alto fijo de
   410. En 112 px no cabe una fila de canal, que sigue maquetada como en
   escritorio: el nombre se corta a media palabra en las seis filas («Wh…sAp»,
   «Faceboo (c…ent»), el contador redondo cae ENCIMA del texto, «Conectado» sale
   cortado y el botón de «Conectar canal» lo recorta la tarjeta. Esa columna no
   se salva estrechándola más: en una portada a 760 px vale más una conversación
   limpia que un raíl de iconos apretados. Se elimina de tableta.

   ESTE BLOQUE TIENE QUE IMPONERSE a las reglas de `site.css` para 880 y para
   520, y por eso repite `grid-template-columns` y esconde `--ch` él mismo: entre
   521 y 880 las reglas de ≤520 de `site.css` NO se aplican, así que no se puede
   contar con ellas. Gana por orden —esta hoja va después— con la misma
   especificidad, no por `!important`. */
@media (max-width: 880px) {
  .mk-demo-body { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mk-demo-col--ch { display: none; }
  /* La del medio es la única sin modificador: la lista de conversaciones. */
  .mk-demo-col:not(.mk-demo-col--ch):not(.mk-demo-col--chat) { display: none; }
  .mk-demo-col--chat { display: flex; flex-direction: column; }
}

/* ── EL TITULAR DE «FUNCIONES» NECESITA 100 PX MÁS ───────────────────────────
   `.mk-section-head` mide 660 px, que es la medida buena para los títulos de una
   línea del resto del sitio. Éste son DOS ideas separadas por un `<br>` —«Todo tu
   negocio, conectado» y «y actuando en un solo lugar»— y en 660 cada mitad se
   parte y deja «conectado» y «lugar» solas en su línea: cuatro líneas y dos
   huérfanas, el mismo defecto que tuvo el titular del hero.
   A 760 caben las dos ideas enteras, cada una en la suya, SIN tocar el tamaño de
   letra — que es lo que habría afectado a las secciones de las otras 28 páginas.
   Medido: a 660 el h2 ocupa 165 px de alto (tres líneas de 56); a 760, 119 (dos). */
#funciones .mk-section-head { max-width: 760px; }

/* ── EL CIERRE, EN UN TELÉFONO ─────────────────────────────────────────────
   A 390 la caja negra medía 656 px: al pasar la rejilla a una columna, el búho
   se llevaba una FILA ENTERA de 150 px para él solo, debajo de las garantías.
   En escritorio ocupa su .5fr y equilibra el texto; apilado, sólo alarga.

   Se le da su sitio DENTRO de la zona de garantías en vez de una fila propia:
   la rejilla pasa a `position: relative`, las tres garantías se apilan en
   columna dejándole un pasillo de 112 px a la derecha, y el búho se ancla ahí
   en absoluto. De «titular → párrafo → botón → garantías → búho» a
   «titular → párrafo → botón → [garantías | búho]».

   SÓLO HASTA 600. Entre 601 y 880 hay anchura de sobra y no se toca: una
   recomposición que nadie ha mirado no se mete por si acaso.

   Y LA SOMBRA DEL BÚHO NO SE TOCA: aquí vuelve a estar sobre el negro #101014
   para el que está calculada, al revés que la del hero. */
@media (max-width: 600px) {
  .mk-cta {
    padding: 38px 24px 28px;
  }

  .mk-cta-grid {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }

  .mk-cta .mk-cta-trust {
    margin-top: 26px;
    min-height: 100px;
    padding-right: 112px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;

    text-align: left;
  }

}

/* ══ Y LOS COLORES DE LA MAQUETA ═════════════════════════════════════════
   El dueño, con la maqueta delante por tercera vez: «se sigue sin parecer; si
   lo intentas duplicar tal cual está». Lo que no cuadraba no era la
   composición: eran cuatro cosas de color y de tamaño, y una de ellas se veía
   desde el otro lado de la habitación.

   ── «DE NUEVO.» VA EN MORADO ────────────────────────────────────────
   Ésa es la que se veía. La hoja de la marca apagaba a propósito el degradado
   del titular de acceso y lo dejaba en tinta —`-webkit-text-fill-color:
   currentColor` con `color: var(--ink)`—, así que la segunda línea salía negra
   en las dos pantallas. En la maqueta es morada, y es lo que le da el acento a
   una pantalla que por lo demás es blanca y gris. */
.au-main:has(.au-dibujo) .au-left h1 .mk-grad-text { color: #6d28d9; }

/* ── LA PESTAÑA ELEGIDA, TAMBIÉN ─────────────────────────────────────
   Estaba en tinta sobre blanco: se veía elegida pero no se veía de QUÉ color
   es este producto. El morado la ata al resto. */
.au-main:has(.au-dibujo) .lg-tab.is-on { color: #6d28d9; }

/* ── LA TARJETA, MÁS REDONDA Y CON MÁS AIRE ──────────────────────────
   18 px de radio contra los 24 de la maqueta, y una sombra corta. Sobre un
   fondo tan claro, una sombra larga y suave es lo que hace que la tarjeta
   «flote» en vez de estar pegada. */
.au-main:has(.au-dibujo) .au-card {
  border-radius: 24px;
  box-shadow: 0 34px 80px -40px rgba(45, 30, 95, .34);
}
/* Los campos: un poco más altos y con el borde en lila, no en gris. */
.au-main:has(.au-dibujo) .au-input { min-height: 48px; border-color: #e6e1f5; }

/* ── EL PANEL DEL DIBUJO, MÁS REDONDO ────────────────────────────────
   Mismo gesto que la tarjeta: en la maqueta las dos esquinas se parecen. */
.au-panel { border-radius: 20px; }

/* ── «TU EQUIPO / SIEMPRE CONECTADO», EN DOS LÍNEAS ──────────────────
   Y con el puntito verde en la primera cara, que es lo que dice «conectado»
   sin una palabra. En una línea el globo salía tan largo que se metía media
   tarjeta adentro. */
.au-dos { white-space: normal; line-height: 1.25; }
.au-cara--1 { position: relative; }
.au-cara--1::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff;
}

/* ── EL SOBRE Y EL CANDADO DENTRO DE LOS CAMPOS ──────────────────────
   La maqueta los lleva, y no son adorno: en una tarjeta con dos campos casi
   iguales, el icono es lo que te dice de un vistazo cuál es cuál sin leer la
   etiqueta. Van como MÁSCARA sobre un cuadrado de color, que es la misma
   técnica con la que la portada pinta los logos de los canales: así el icono
   hereda el gris de aquí y no hay que tocar el fichero para cambiarlo.

   Y NO SE LOS PONE A TODOS LOS CAMPOS. Se apuntan por el `type` del `input`
   que llevan dentro —`:has()` otra vez—, porque el nombre y el teléfono del
   alta no tienen icono en la maqueta. */
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="email"]),
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="password"]) { position: relative; }
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="email"])::before,
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="password"])::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; background: #9a96ae; pointer-events: none; z-index: 1;
}
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="email"])::before {
  -webkit-mask: url(/assets/web/ui/ico-correo.svg) center / contain no-repeat;
  mask: url(/assets/web/ui/ico-correo.svg) center / contain no-repeat;
}
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="password"])::before {
  -webkit-mask: url(/assets/web/ui/ico-candado.svg) center / contain no-repeat;
  mask: url(/assets/web/ui/ico-candado.svg) center / contain no-repeat;
}
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="email"]) .au-input,
.au-main:has(.au-dibujo) .au-input-wrap:has(input[type="password"]) .au-input { padding-left: 43px; }

/* El globo del equipo baja un poco: con dos renglones había crecido hacia
   arriba y se comía el último renglón de la lista de conversaciones. */
.au-globo--bajo { bottom: -34px; }

/* Las filas, con el aire de la maqueta: allí cada conversación respira más y
   el panel entero se lee como una lista de verdad, no como una tabla apretada. */
.au-hilos { padding: 11px 12px; gap: 3px; }
.au-hilos li { padding: 10px 10px; }
.au-menu { padding: 13px 10px; }
.au-menu li { padding: 9px 10px; }

/* ══ LA ILUSTRACIÓN DE ACCEDER Y DE ÚNETE GRATIS ═════════════════════════
   El dueño la generó con ChatGPT y pidió que se respetara tal cual. Antes esto
   era un dibujo hecho con `<div>`: se parecía, pero no era. Ahora es su imagen.

   LO QUE PASA AQUÍ, EN UNA FRASE: la ilustración va DETRÁS de todo, ocupando
   la mitad derecha del bloque, y el formulario se pone encima — que es
   exactamente «cómo la imagen sale de detrás de inicio de sesión» que pedía.

   Y LA CAJA SE ENSANCHA a 1.340: con los 1.180 de siempre no caben el texto,
   la ilustración y la tarjeta sin pisarse. Mismo gesto que el banner de la
   portada.

   ── ESTOS TRES NÚMEROS LOS LEE UN BANCO ──────────────────────────────
   El ancho de aquí y el `left`/`right` de abajo son lo que decide cuántos
   puntos de CSS mide la caja donde se pinta el dibujo: 1.340 menos 8 % menos
   9 % son 1.112, y de ahí sale cuántos puntos de imagen hacen falta.
   `bk-el-dibujo-tiene-puntos-de-sobra` los lee de aquí, no los tiene escritos,
   así que tocar cualquiera de los tres mueve la cota con él.

   ── Y ESTE BLOQUE VA UNA VEZ ─────────────────────────────────────────
   El guion que lo monta añade AL FINAL. Corrido tres veces, dejó el bloque
   tres veces: la página se veía bien —en la cascada manda el último— y lo
   único que pasaba era que 212 líneas viajaban muertas y que quien editara
   la primera copia no vería su cambio en ningún sitio. Hay una ley para eso. */
.au-main:has(.au-dibujo) { max-width: 1340px; position: relative; }

.au-dibujo {
  position: absolute; z-index: 0; pointer-events: none;
  /* DÓNDE CAE EL PANEL, QUE ES LO ÚNICO QUE IMPORTA AQUÍ.
     El panel de Cuho está en el 48,7 % del ancho de la imagen y su centro
     tiene que caer en el hueco que queda entre el texto y la tarjeta — si cae
     más a la derecha, la tarjeta se lo come entero y sólo se ve el menú
     lateral, que es lo que pasó al primer intento. Con estos números el panel
     mide unos 430 px y su centro cae a media distancia, así que asoma entero y
     sólo se mete por debajo de la tarjeta su borde derecho. */
  left: 8%; right: 9%; top: 20px;
}
.au-dibujo img {
  display: block; width: 100%; height: auto;
  /* LOS BORDES SE DESVANECEN. La imagen trae su propio fondo lavanda, y un
     rectángulo de lavanda encima del degradado de la página deja un escalón en
     los cuatro lados. Apagándola hacia fuera, las manchas moradas se funden
     con el fondo y no hay borde que ver. */
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 52% 48%, #000 58%, transparent 92%);
  mask-image: radial-gradient(ellipse 62% 60% at 52% 48%, #000 58%, transparent 92%);
}

/* EL TEXTO Y EL FORMULARIO, ENCIMA.
   Un hijo posicionado con nivel 0 se pinta por encima de los hermanos que van
   en el flujo normal aunque esté escrito antes, así que sin esto la
   ilustración tapaba el final del párrafo. Y la tarjeta lleva el dos para que
   la imagen le pase POR DEBAJO, que es lo que se pidió. */
.au-main:has(.au-dibujo) > .au-left { position: relative; z-index: 1; }
.au-main:has(.au-dibujo) > .au-card { position: relative; z-index: 2; }

/* Y LA COLUMNA DE TEXTO SE ACORTA, para que no llegue hasta debajo del panel
   de la ilustración: a 430 px el párrafo y los tres puntos caben enteros y
   acaban antes de que empiece el dibujo. A los 396 px de antes, «en una
   bandeja» se caía sola al tercer renglón; y 430 sigue sin llegar al dibujo,
   que empieza en el 54 % de la columna. */
.au-main:has(.au-dibujo) .au-left > p,
.au-main:has(.au-dibujo) .au-points { max-width: 430px; }

/* POR DEBAJO DE 1.180 NO SALE. Ahí las dos columnas se apilan y la ilustración
   se pondría entre el titular y el formulario: justo el estorbo que esto venía
   a no ser. Y de paso se ahorra los 87 KB en el móvil, que es donde más
   duelen. `display: none` en el `<img>` y no sólo en su caja: un `<img>`
   escondido de otras maneras se descarga igual. */
@media (max-width: 1180px) {
  .au-dibujo, .au-dibujo img { display: none; }
}

/* ══ EL ANCHO DE ESTAS DOS PÁGINAS ═══════════════════════════════════════
   MEDIDO, no estimado. La maqueta del dueño es una imagen de 1224 px de
   ancho y su contenido va de 46 a 1180: ocupa el 92,6 % del papel, con 46 px
   de margen a cada lado. La hoja de la casa capa el contenido en 1.180 px
   con el token `--wrap`, así que a 1750 px de pantalla —donde él la mira—
   mi página dejaba 310 px de vacío a cada lado y lo metía todo en una
   columna estrecha: el titular se partía en tres renglones y las seis fichas
   de canal se caían a dos filas.

   Con esto, el contenido mide lo que mide en la maqueta A CUALQUIER ancho:
     · a 1224 -> márgenes de 46 px y 1131 de contenido (la maqueta: 46 y 1134);
     · a 1750 -> márgenes de 66 px y 1618 de contenido.
   Y se para en 1680 para que en un monitor de 2560 no salgan renglones de
   doscientos caracteres. Sólo afecta a estas dos páginas: el resto del sitio
   sigue con su ancho de siempre. */
.kx-hero .mk-wrap, .kx-sec-canales .mk-wrap, .kx-sec-dos .mk-wrap, .kx-sec-faq .mk-wrap,
.hy-hero .mk-wrap, .hy-sec .mk-wrap, .hy-sec-cierre .mk-wrap {
  max-width: 1680px; padding-left: clamp(18px, 4.66vw, 78px); padding-right: clamp(18px, 4.66vw, 78px);
}
/* EL 3,8 % DE ANTES DEJABA EL TITULAR A LA IZQUIERDA DEL LOGOTIPO. En la
   ventana del dueño —1265 de contenido— salían 48 px de margen, y la marca de
   la barra arranca en 59: once píxeles de desnivel entre dos cosas que en la
   maqueta están a plomo (las dos en 72). No se ve como un número, se ve como
   que la página está torcida. 4,66 vw lo deja en 59 y las dos arrancan juntas.
   No lo llevo a los 72 de la maqueta porque la barra es de las 32 páginas y
   moverla es otro encargo: entre parecerme al dibujo y cuadrar conmigo mismo,
   cuadro conmigo mismo. */

/* Y SIN LAS BARRITAS DEL PIE DEL BANNER. Son la textura de la casa y en la
   maqueta no están: ahí el papel sube en un lavanda liso hacia el blanco. */
.kx-hero::after, .hy-hero::after { display: none; }

/* ══ EL PAPEL DE ESTAS DOS PÁGINAS, MEDIDO EN LA MAQUETA ═════════════════
   Leyendo el borde izquierdo de las dos imágenes, píxel a píxel, salen las
   franjas de color que tienen. No son «un lavanda parecido»: son éstas.

     CANALES  0-53 #fefefe (la barra) · 54-203 un degradado de #f4f3fb a
              #ece4fc (la mancha suave de detrás del titular) · 204-1109
              #f4f2fe (el cuerpo) · 1110-fin #fafafd (las dudas).
     AYUDA    0-53 #fefefe · 60-437 #f7f5fc (el banner) · 438-1265 #faf9ff
              (categorías y artículos) · 1266-1385 #f0edfe (el soporte) ·
              1386-fin #f8f7fe (el cierre).

   LA BARRA DE ARRIBA VA BLANCA. En el resto del sitio es un cristal tintado
   sobre el degradado del `body`; en estas dos maquetas es blanca y se separa
   del banner con una línea. Se cambia sólo aquí, con `:has()`, para no tocar
   las otras treinta páginas. */
body:has(.kx-hero) .mk-nav, body:has(.hy-hero) .mk-nav { background: #fefefe; border-bottom-color: #f1eefb; }

/* EL PAPEL DEL SITIO NO SE TOCA. Aquí iba un fondo propio para el `body` de
   estas dos páginas y lo cazó la ley de la hoja compartida: el papel se
   declara UNA vez y ninguna página se trae el suyo. No hace falta: las
   secciones de abajo son opacas y se tocan entre ellas, así que el degradado
   del sitio no asoma por ningún hueco. */

/* La mancha de detras del titular es SUAVE: en la maqueta el lavanda mas
   oscuro que llega a tocar es #ece4fc, y eso es casi blanco. Puesta a tope se
   lee como otra marca. */
.kx-hero {
  background:
    radial-gradient(40% 44% at 13% 30%, rgba(224, 212, 250, .72) 0%, rgba(224, 212, 250, 0) 74%),
    linear-gradient(180deg, #f6f5fc 0%, #f1edfd 40%, #f4f2fe 100%);
}
.kx-sec-canales, .kx-sec-dos { background: #f4f2fe; }
.kx-sec-faq { background: #fafafd; }

.hy-hero {
  background:
    radial-gradient(30% 46% at 100% 0%, rgba(206, 190, 251, .85) 0%, rgba(206, 190, 251, 0) 100%),
    radial-gradient(34% 42% at 0% 100%, rgba(212, 199, 252, .9) 0%, rgba(212, 199, 252, 0) 100%),
    radial-gradient(36% 58% at 70% 52%, rgba(234, 225, 253, .9) 0%, rgba(234, 225, 253, 0) 100%),
    linear-gradient(180deg, #f8f6fd 0%, #f2eefd 100%);
  border-bottom: 1px solid #f0ecfa;
}
/* EL FONDO DE CADA SECCIÓN, EL DE SU MAQUETA (2026-10-03). Importa más de lo
   que parece: los dibujos son recortes de esas maquetas con el borde
   difuminado, y se funden sólo si el lavanda de detrás es el mismo. Por el
   identificador y no por posición: el último <section> es el cierre. */
.hy-sec {
  background:
    radial-gradient(38% 34% at 100% 100%, rgba(226, 218, 253, .95) 0%, rgba(226, 218, 253, 0) 100%),
    linear-gradient(180deg, #f6f4fe 0%, #f6f4fe 62%, #f1effd 100%);
}
#articulos.hy-sec { background: #ebe8fc; }
#contacto.hy-sec { background: #eeecfc; }
.hy-sec-cierre { background: linear-gradient(180deg, #f6f4fe 0%, #f0edfd 100%); }

/* ══ CANALES E INTEGRACIONES, MONTADA SEGÚN LA MAQUETA ═══════════════════
   Del encargo del dueño del 2026-09-23: «tiras las que hay ahora y montas
   estas nuevas tal cual». Prefijo `kx-` porque `cx-` era de la página vieja y
   dos componentes distintos no comparten nombre: la última vez que reusé uno
   —`.cx-lg`— las fichas del panel pasaron de cuadrado a círculo sin que lo
   pidiera nadie.

   LOS LOGOTIPOS SON LOS DE VERDAD, de `web/logos/`, puestos con `.lgm`: el
   fichero como máscara sobre un cuadrado de color. Un WhatsApp dibujado a mano
   es un globo blanco sin el teléfono dentro, y al lado del de Messenger
   —otro globo blanco— parecen el mismo icono mal. */
/* ── LAS NOTAS A MANO ─────────────────────────────────────────────────── */
.kx-nota {
  position: absolute; margin: 0; z-index: 3; pointer-events: none;
  font-family: var(--font-mano, 'Caveat', cursive); font-size: 21px; line-height: 1.16;
  color: #7c3aed; text-align: left;
}
.kx-curva { position: absolute; width: 42px; height: 52px; fill: none; stroke: #7c3aed; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kx-curva--abajo { left: 50%; top: 100%; margin-left: -20px; }
.kx-curva--corta { width: 38px; height: 46px; }

/* ── 2 · LOS CANALES ──────────────────────────────────────────────────── */
.kx-sec-canales, .kx-sec-dos, .kx-sec-faq { padding-top: 0; }
.kx-sec-canales .mk-wrap, .kx-sec-faq .mk-wrap { position: relative; }
.kx-sec-canales { padding-top: 6px; }
.kx-ante { text-align: center; margin: 0 auto 12px; width: max-content; padding: 6px 0; color: #6d28d9; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kx-h2 { text-align: center; margin: 0 0 12px; font-family: var(--font-display, inherit); font-size: clamp(25px, 2.9vw, 36px); font-weight: 800; letter-spacing: -.025em; color: #171a21; }
.kx-subs { text-align: center; max-width: 66ch; margin: 0 auto 34px; font-size: 15px; line-height: 1.65; color: #5b6274; }
/* LAS TRES NOTAS DE LA PÁGINA VAN A 33 DEL BORDE, como la del banner: con
   `right: 0` acababan en 1250 de 1250 y se les comía la última letra
   —«Más conversacione», «¿Tienes otra duda»—. El cero no era el del texto:
   era el del relleno de la caja que manda. */
.kx-nota--canales { right: 33px; top: 46px; }
.kx-nota--faq { right: 33px; top: 34px; }

/* LAS SEIS TARJETAS DE CANAL, MEDIDAS EN LA MAQUETA. A la ventana del dueño
   miden 182 de ancho por 258 de alto, con el círculo del logotipo a 62 y la
   marca dentro a 40 —los míos iban a 39 y 22—, y el botón de flecha arriba a
   la derecha a 39. El papel de cada una lleva EL TINTE DE SU MARCA, que es lo
   que hace que la fila se lea como seis cosas distintas y no como seis
   casillas iguales.
   Y el logotipo va de COLOR sobre su tono claro, no blanco sobre un disco de
   color: así son los mismos seis dibujos que la fila del banner, y quien baja
   por la página reconoce que habla de lo mismo. */
.kx-canales { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kx-cn {
  position: relative; display: flex; flex-direction: column;
  font-size: clamp(9.6px, .8vw, 14px);
  padding: 2.17em 1.6em 1.9em; border-radius: 1.98em;
  background: var(--tinte, #fff); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 1.739em 3.826em -2.957em rgba(35, 20, 80, .45);
  transition: transform .2s cubic-bezier(.22, .8, .3, 1), box-shadow .2s ease;
}
.kx-cn:hover { transform: translateY(-0.348em); box-shadow: 0 2.435em 4.522em -2.609em rgba(76, 29, 149, .45); }
.kx-cn-lg {
  display: grid; place-items: center; width: 6.13em; height: 6.13em; border-radius: 50%;
  margin-bottom: 1.5em; background: var(--halo, rgba(124, 58, 237, .14));
}
.kx-cn-lg img { width: 3.95em; height: 3.95em; display: block; }
/* EL BOTÓN DE LA FLECHA. Va encima de la tarjeta, no dentro del texto, porque
   en la maqueta está a la altura del círculo y el texto empieza más abajo. */
.kx-cn-ir {
  position: absolute; top: 2.17em; right: 1.6em;
  display: grid; place-items: center; width: 3.85em; height: 3.85em; border-radius: 50%;
  background: #fff; color: #6d28d9; text-decoration: none;
  box-shadow: 0 0.7em 1.6em -1em rgba(35, 20, 80, .4);
  transition: transform .18s ease, background .18s ease;
}
.kx-cn-ir svg { width: 1.7em; height: 1.7em; }
.kx-cn-ir:hover { transform: translateX(0.17em); background: #f6f3ff; }
.kx-cn-ir:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }
.kx-cn-ir > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.kx-cn h3 { margin: 0 0 0.61em; font-size: 1.78em; font-weight: 800; letter-spacing: -.016em; color: #171a21; line-height: 1.16; }
.kx-cn p { margin: 0 0 1.4em; font-size: 1.32em; line-height: 1.46; color: #6a6f83; }
.kx-cn .kx-ok {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: auto;
  align-self: flex-start; padding: 0.45em 0.75em 0.45em 0.45em; border-radius: 86.87em;
  background: rgba(255, 255, 255, .72); font-size: 1.02em; font-weight: 700; color: #15a349;
  white-space: nowrap;
}
.kx-ok svg { width: 1.3em; height: 1.3em; flex: none; }
/* Lo que aún no se puede conectar (falta una aprobación de fuera) no lleva el
   verde de «hecho»: el mismo rótulo, en el gris del texto y con un reloj. */
.kx-cn .kx-ok--pendiente { color: #6a6f83; }

/* ── 3 · CÓMO SE CONECTA · LAS INTEGRACIONES ──────────────────────────── */
/* LAS DOS TARJETAS, IGUAL DE ALTAS. Con `start` la de la izquierda acababa
   150 px antes que la de la derecha y el bloque quedaba descuadrado; en la
   maqueta las dos llegan abajo a la vez. */
.kx-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: stretch; }
.kx-como, .kx-integ { display: flex; flex-direction: column; font-size: clamp(9.6px, .8vw, 14px); padding: 2.261em 2.087em; border-radius: 1.739em; background: #fff; border: 1px solid #f0ecfb; box-shadow: 0 1.913em 4.348em -3.13em rgba(35, 20, 80, .45); }
/* MEDIDO EN EL DIBUJO: la tinta del titular ocupa 23 px de alto —a esta letra
   son 24— y la mía 19. El párrafo de debajo, 15,5 contra 11,4. Toda la
   tarjeta iba un cuarto más pequeña de lo dibujado. */
.kx-como h2, .kx-integ h2 { margin: 0 0 0.66em; font-family: var(--font-display, inherit); font-size: 2.4em; font-weight: 800; letter-spacing: -.022em; color: #171a21; }
.kx-como-p { margin: 0 0 1.74em; font-size: 1.53em; line-height: 1.5; color: #6f7487; max-width: 40ch; }
.kx-como-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 15.478em; gap: 1.565em; align-items: stretch; }
/* LOS CUATRO PASOS SE REPARTEN EL ALTO CON FILAS DE 1fr, NO CON
   `space-between`. Con `space-between` el hueco que se abre entre un paso y el
   siguiente queda FUERA de las dos cajas, y el hilo de puntos —que se dibuja
   contra la caja del paso— se quedaba a medio camino: tres puntos y el vacío.
   Con las filas a 1fr el hueco se lo queda la caja, y el hilo llega. */
.kx-pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6em; grid-auto-rows: 1fr; }
.kx-pasos li { position: relative; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 1.13em; align-items: start; }
.kx-pasos .kx-n { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #f1ecfe; color: #6d28d9; font-size: 1.3em; font-weight: 800; }
/* EL HILO DE PUNTOS ENTRE UN PASO Y EL SIGUIENTE. En la maqueta está, y es
   lo que dice que los cuatro van en ORDEN y no son cuatro cosas sueltas.
   Se dibuja con un borde punteado, no con una imagen, y no lo lleva el
   último: un hilo que sale del cuarto paso no lleva a ninguna parte. */
.kx-pasos li:not(:last-child)::before {
  content: ''; position: absolute; left: 2.2em; top: 5em; bottom: -1.9em;
  border-left: 2px dotted #ddd5f6;
}
.kx-pasos b { display: block; margin-bottom: 0.17em; font-size: 1.42em; color: #171a21; }
.kx-pasos li span:not(.kx-n) { font-size: 1.3em; line-height: 1.45; color: #8b90a3; }

/* EL CUADRADO LILA DE CADA TARJETA. En la maqueta las dos lo llevan arriba
   —el rayo y la pieza de puzle— y es lo que las presenta antes del titular. */
.kx-dos-ic {
  display: grid; place-items: center; width: 3.65em; height: 3.65em; margin-bottom: 1.3em;
  border-radius: 1.13em; background: #f0ebfe; color: #6d28d9;
}
.kx-dos-ic svg { width: 1.9em; height: 1.9em; }

.kx-conecta { position: relative; display: grid; gap: 0.61em; align-content: start; }
/* LA NOTA VA ENCIMA DEL PANEL, no dentro. Dentro se le echaba encima a los
   logotipos y se partia en cuatro renglones; en la maqueta cuelga arriba a la
   izquierda y la flecha baja hacia el primer boton. */
/* ARRIBA, AL LADO DEL TITULAR, NO ENCIMA DEL PÁRRAFO. Con 1,4em la nota caía
   en la misma banda que el texto de entrada —de 1400 a 1446 ella, de 1378 a
   1448 él— y las letras se pisaban. En la maqueta cuelga a la altura del
   titular, que es donde no estorba a nadie. */
.kx-nota--como { right: 0; bottom: 100%; margin-bottom: 5.4em; font-size: 20px; white-space: nowrap; text-align: right; }
.kx-nota--como .kx-curva { right: 0.6em; top: 100%; width: 34px; height: 40px; }
/* LAS FILAS DICEN EL NOMBRE DEL CANAL. Antes eran un circulito y un botón que
   ponía «Conectar» seis veces: lo único que distinguía una fila de otra era un
   dibujo de 20 px, y el nombre —que es el dato— no salía. En la maqueta son
   pastillas anchas con el logotipo de color, el nombre y una flecha. */
.kx-fila {
  display: flex; align-items: center; gap: 0.87em;
  padding: 0.7em 0.87em; border-radius: 1.04em; background: var(--tinte, #fff);
}
.kx-fila img { width: 2.26em; height: 2.26em; flex: none; display: block; }
.kx-fila b { font-size: 1.13em; font-weight: 700; color: #2f2c45; }
.kx-fila > svg { margin-left: auto; width: 1.3em; height: 1.3em; color: #6d28d9; flex: none; }
.kx-fila.is-on { box-shadow: inset 0 0 0 1px #cdbdfb, 0 0.7em 1.6em -1em rgba(76, 29, 149, .4); }
.kx-raton { position: absolute; left: 7.4em; top: 2.4em; width: 1.391em; height: 1.391em; filter: drop-shadow(0 0.174em 0.348em rgba(35, 20, 80, .35)); }

.kx-int-rej { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.96em; }
/* CADA FICHA, CON EL TINTE DE SU MARCA Y SU APUNTE ABAJO. En la maqueta no son
   ocho casillas blancas: cada una tiene el color de la herramienta y, debajo
   del texto, un dibujito de lo que esa integración trae. Sin eso la rejilla se
   lee como una lista de logotipos. */
.kx-int {
  position: relative; display: flex; flex-direction: column;
  padding: 1.3em 1.04em 1.04em; border-radius: 1.3em;
  background: var(--tinte, #fff); border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 1.217em 2.957em -2.609em rgba(35, 20, 80, .45);
}
.kx-int--mas { border-style: dashed; border-color: #ddd6fe; box-shadow: none; }
/* EL BOTÓN DE LA FLECHA LLEVA AL ALTA, que es donde se conecta de verdad: no
   hay una página por integración, y una flecha que no va a ningún sitio es
   peor que no ponerla. Cada una dice su nombre para quien escucha la página. */
.kx-int-ir {
  position: absolute; top: 1.3em; right: 1.04em;
  display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: 50%;
  background: #fff; color: #6d28d9; text-decoration: none;
  box-shadow: 0 0.5em 1.2em -0.8em rgba(35, 20, 80, .45);
  transition: transform .18s ease, background .18s ease;
}
.kx-int-ir svg { width: 1.13em; height: 1.13em; }
.kx-int-ir:hover { transform: translateX(0.13em); background: #f6f3ff; }
.kx-int-ir:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }
.kx-int-ir > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.kx-int-mk { display: block; margin-top: auto; padding-top: 0.87em; color: #6d28d9; }
.kx-int-mk svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0.35em 0.9em rgba(35, 20, 80, .16)); }
/* LA BALDOSA, MAS GRANDE Y CON EL LOGOTIPO A TODO COLOR. En la maqueta mide
   42 px con el dibujo a 26; la mia iba a 34 con el dibujo a 20, y ademas por
   MASCARA, que solo puede pintar de un color. Ahora es un <img>. */
.kx-int-lg { display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 1.13em; margin-bottom: 1.04em; }
.kx-int-lg img { width: 82%; height: 82%; display: block; }
.kx-int .kx-int-lg { color: #fff; }
.kx-int-lg .lgm { --k: 62%; }
/* SIN CUADRO BLANCO DETRÁS. El papel de la ficha ya lleva el tinte de la
   marca; un recuadro blanco encima parte el color en dos y no está en el
   dibujo. Las dos que no son de nadie —el calendario por enlace y la hoja
   de cálculo— sí lo llevan, porque su icono es de la casa y necesita su
   propio fondo para leerse. */
.kx-int-lg--claro { background: none; border: 0; }
.kx-int .kx-int-lg--mas { background: #f1ecfe; color: #6d28d9; }
/* Las dos que no tienen logotipo de marca porque no son de nadie: el
   calendario por enlace y la hoja de cálculo. Van con el icono de la casa. */
.kx-int .kx-int-lg--marca { background: #f3eefe; color: #6d28d9; }
.kx-int-lg--marca svg { width: 2.4em; height: 2.4em; }
.kx-int-lg--mas svg { width: 1.9em; height: 1.9em; }
.kx-int b { display: block; margin-bottom: 0.348em; font-size: 1.04em; font-weight: 800; letter-spacing: -.02em; color: #171a21; }
/* EL TEXTO LLEVA CLASE PROPIA, y no es manía. Dentro de la ficha hay ahora
   otro `<span>` —el nombre escondido del botón de la flecha— y `.kx-int span`
   los alcanzaba a los dos: dos trozos de selector, el mismo peso, y decide
   quién se escribió antes. Es el empate que acabo de enseñarle al banco a
   cazar; no lo voy a dejar escrito aquí a propósito. */
.kx-int-p { display: block; font-size: 0.93em; line-height: 1.45; color: #7c8195; }

/* ── 4 · LAS DUDAS ────────────────────────────────────────────────────── */
/* CUATRO EN UNA FILA, como en la maqueta. Estaban a dos por dos. */
.kx-faq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.kx-fq { font-size: clamp(9.6px, .8vw, 14px); padding: 1.565em 1.739em; border-radius: 1.391em; background: #fff; border: 1px solid #f0ecfb; box-shadow: 0 1.565em 3.652em -2.957em rgba(35, 20, 80, .45); }
.kx-fq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.217em; cursor: pointer;
  font-size: 1.261em; font-weight: 800; color: #171a21; list-style: none;
}
.kx-fq summary::-webkit-details-marker { display: none; }
.kx-fq summary i { position: relative; width: 1.304em; height: 1.304em; flex: none; }
.kx-fq summary i::before, .kx-fq summary i::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: #6d28d9; border-radius: 0.174em;
  transform: translate(-50%, -50%); transition: transform .22s ease, opacity .22s ease;
}
.kx-fq summary i::before { width: 1.13em; height: 0.174em; }
.kx-fq summary i::after { width: 0.174em; height: 1.13em; }
.kx-fq[open] summary i::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.kx-fq p { margin: 0.957em 0 0; font-size: 1.13em; line-height: 1.6; color: #6f7487; }

/* LAS SEIS EN UNA FILA HASTA LOS 1.160. En la maqueta van en una fila y a la
   ventana del dueño salen a 180 cada una, que es su medida.
   EL CORTE SUBE DE 1.000 A 1.160 y no más: por debajo de ahí la tarjeta baja
   de 168 y la insignia más larga —«Integración disponible», 136 px— se come
   el margen del papel y queda pegada al borde. Y por arriba no puede acercarse
   a 1.265, que es donde él la mira: con el corte en 1.240 se caían a dos filas
   delante de sus ojos. Entre 1.200 y 1.265 hay sitio de sobra para las dos
   cosas. */
@media (max-width: 1200px) {
  .kx-canales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .kx-int-rej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .kx-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .kx-dos { grid-template-columns: 1fr; }
  .kx-nota { display: none; }
}
@media (max-width: 860px) {
  .kx-como-in { grid-template-columns: 1fr; }
  .kx-faq { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .kx-canales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .kx-canales, .kx-int-rej { grid-template-columns: 1fr; }
}
/* ══ CENTRO DE AYUDA, MONTADO SEGÚN LA MAQUETA ═══════════════════════════
   Del mismo encargo que la página de canales. Prefijo `hy-`; `ay-` era de la
   versión anterior y dos componentes distintos no comparten nombre. */
/* ══ EL BANNER, CALCADO A LA MAQUETA DEL 2026-10-03 ══════════════════════
   Medido con un contador de píxeles sobre la maqueta (1672x941), no a ojo.
   Cada medida va en «píxeles de maqueta» por --s, y --s es el menor de dos:
     · el ancho de la ventana entre 1672, el ancho de la maqueta;
     · el alto que queda entre 589, lo que mide en la maqueta el texto de la
       etiqueta a las marcas. «Lo que queda» es la pantalla menos la franja y
       la barra (111) y 36 de aire arriba y otros 36 abajo (183 en total).
   Así el banner es la maqueta a escala Y cabe entero en la primera pantalla.
   En la ventana del dueño —1280x585— manda el alto: --s sale 0,68 y el
   titular, 61 px. A 1672x941 --s es 1 y es la maqueta tal cual.

   Lo medido, en píxeles de maqueta:
     etiqueta   18 de letra; tinta de 247 a 264; la chispa, 21x23
     titular    89 de letra (Plus Jakarta Sans 800), renglón de 84 (0,94),
                el ojo del «E» en 320; las dos líneas, de 64 a 598 y a 655
     entradilla 24,7 de letra, renglón de 37 (1,5), cuatro renglones
     botones    77 de alto, 296 y 315 de ancho, 24 entre los dos, letra 21
     marcas     17,2 de letra; los tics, 19x14, a 19 del texto
     separación 43 de la etiqueta al titular, 37 al texto, 30 a los botones
                y 41 a las marcas
     dibujo     de x=700 a 1632 (932 de ancho), centrado con el texto
   Los colores, contados igual: titular #0a0a12 y «ayudarte» #7419e8;
   etiqueta #585474; entradilla #605c78; marcas #4c4864; el botón lleno
   #6c1ce8; el blanco, #fdfdfd con borde #e6e2f2 y letra negra.

   Debajo de cada tamaño de letra hay un suelo para que nunca se quede en
   letra de prospecto en una ventana muy baja. Por debajo de 1041 el banner
   se apila y --s se calcula con el ancho. */
.hy-hero {
  --s: min(calc(100vw / 1672), calc((100svh - 183px) / 589));
  padding-top: 0; padding-bottom: 0;
}
/* La franja pone 8 px arriba a todo banner que va detrás (`.mk-topbar ~
   .mk-hero`): aquí el aire ya está contado en --s. */
.mk-topbar ~ .hy-hero { padding-top: 0; }
@media (min-width: 1041px) {
  /* UNA PANTALLA ENTERA en las ventanas bajas, como la del dueño; en las
     altas, la proporción de la maqueta —784 de alto por 1672 de ancho— en
     vez de una franja lavanda vacía cada vez más alta. */
  .hy-hero { min-height: min(calc(100svh - 111px), calc(784 * var(--s))); display: flex; flex-direction: column; justify-content: center; }
  /* `width: 100%` porque `.mk-wrap` lleva `margin: 0 auto`, y en un flex ese
     margen apaga el estirado: la caja se quedaba en su ancho de contenido. */
  .hy-hero > .hy-h { width: 100%; }
  /* Y UN POCO POR ENCIMA DEL CENTRO, como en la maqueta, que deja 85 arriba
     y 110 abajo: 16 de margen debajo lo sube 8. Cabe en el aire contado. */
  .hy-hero > .hy-h { margin-bottom: calc(16 * var(--s)); }
}
@media (max-width: 1040px) {
  .hy-hero { --s: clamp(.5px, calc(100vw / 1250), .75px); }
}
.hy-h {
  position: relative; display: grid; align-items: center;
  /* LA COLUMNA DEL TEXTO MIDE LO QUE EL TEXTO: 655 (la fila de las marcas
     ocupa 642 en la maqueta), y nunca menos de 478 px. Ese suelo es por los
     suelos de letra: en las ventanas bajas las marcas no encogen más de
     12,5 px y su fila se queda en 464, que con 680 de columna ya no cabía
     en la ventana del dueño y la tercera se iba a otro renglón. Lo que no
     coge el texto se lo queda el dibujo, que con 700 fijos salía un 11 %
     más pequeño que en la maqueta. */
  grid-template-columns: minmax(0, max(calc(655 * var(--s)), 478px)) minmax(0, 1fr);
}
.hy-h-tx { text-align: left; min-width: 0; }
/* LA ETIQUETA, SIN CÁPSULA: la chispa y el texto, como en la maqueta (y como
   quiere el dueño en toda la web). */
.hy-ante {
  display: flex; align-items: center; gap: 1.05em; margin: 0 0 calc(43 * var(--s));
  font-size: max(12.5px, calc(18 * var(--s))); line-height: 1.3; font-weight: 600; color: #585474;
}
.hy-ante > svg { width: 1.25em; height: 1.25em; flex: none; fill: #7034dc; }
.hy-h-tx h1 {
  margin: 0 0 calc(37 * var(--s)); font-family: var(--font-display, inherit);
  font-size: max(34px, calc(89 * var(--s))); font-weight: 800; line-height: .94;
  letter-spacing: -.03em; color: #0a0a12;
}
.hy-grad { color: #7419e8; }
.hy-sub { margin: 0 0 calc(30 * var(--s)); max-width: 24.5em; font-size: max(14px, calc(24.7 * var(--s))); line-height: 1.5; color: #605c78; }
/* LOS DOS BOTONES. El lleno lleva al buscador, que bajó al principio de las
   categorías, y deja el cursor dentro; el blanco, a la sección de soporte de
   esta misma página. No son `.hy-cta`: ese es el botón del cierre, otro
   componente con otra medida. */
.hy-botones { display: flex; flex-wrap: wrap; gap: max(10px, calc(24 * var(--s))); }
.hy-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .95em;
  min-height: max(46px, calc(77 * var(--s))); padding: 0 calc(36 * var(--s)); border-radius: 999px;
  font-size: max(14px, calc(21 * var(--s))); font-weight: 600; line-height: 1.2; text-decoration: none;
  background: #fdfdfd; color: #000; border: 1px solid #e6e2f2;
  box-shadow: 0 16px 34px -26px rgba(35, 20, 80, .45);
  transition: transform .18s ease, background .18s ease;
}
.hy-boton > svg { width: 1.35em; height: 1.35em; flex: none; color: #6c1ce8; }
.hy-boton--lleno { background: #6c1ce8; color: #fff; border-color: #6c1ce8; box-shadow: 0 18px 36px -20px rgba(108, 28, 232, .7); }
.hy-boton--lleno > svg { color: #fff; }
.hy-boton:hover { transform: translateY(-2px); }
.hy-boton--lleno:hover { background: #5b14c9; }
.hy-boton:focus-visible { outline: 2px solid #6c1ce8; outline-offset: 3px; }
/* La letra va en la lista y no en cada renglón para que el hueco entre marcas
   (1,9 em = los 32 de la maqueta) se mida con su misma letra. */
.hy-ticks {
  display: flex; flex-wrap: wrap; gap: 8px 1.9em; list-style: none; margin: calc(41 * var(--s)) 0 0; padding: 0;
  font-size: max(12.5px, calc(17.2 * var(--s))); line-height: 1.3; color: #4c4864;
}
.hy-ticks li { display: inline-flex; align-items: center; gap: 1.1em; }
.hy-ticks svg { width: 1.1em; height: 1.1em; color: #6414d0; flex: none; }
/* EL DIBUJO, a la derecha y con su ancho de la maqueta. En la maqueta se sale
   40 px por la derecha del borde de la barra; aquí también, sin pasar nunca
   del hueco que tiene (`max-width`). */
.hy-ilus { justify-self: end; min-width: 0; width: calc(943 * var(--s)); max-width: calc(100% + 40 * var(--s)); margin-right: calc(-40 * var(--s)); }
.hy-ilus img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .hy-boton { transition: none; }
  .hy-boton:hover { transform: none; }
}

/* ── EL BUSCADOR ──────────────────────────────────────────────────────── */
.hy-busca {
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px;
  border-radius: 999px; background: #fff; border: 1px solid #e9e3ff;
  box-shadow: 0 20px 44px -30px rgba(35, 20, 80, .45);
}
.hy-busca > svg { width: 18px; height: 18px; color: #a09dba; flex: none; }
.hy-busca input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.hy-busca input::placeholder { color: #a09dba; }
.hy-busca input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.hy-busca-b {
  flex: none; padding: 11px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: #6d28d9; color: #fff; font: inherit; font-size: 14px; font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.hy-busca-b:hover { background: #5b21b6; transform: translateY(-1px); }
.hy-frec { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 15px 0 0; font-size: 12px; color: #8b90a3; }
.hy-frec button {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid #ece7f8; font: inherit; font-size: 11.5px; font-weight: 600; color: #5b6274;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.hy-frec button:hover { border-color: #c9b8f5; color: #6d28d9; transform: translateY(-1px); }

/* ── LOS CUATRO SITIOS ────────────────────────────────────────────────── */
/* Bajaron del banner al principio de las categorías, junto al buscador. */
.hy-atajos { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hy-atajos a {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px;
  text-decoration: none; font-size: 13px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1px solid #efeafa;
  box-shadow: 0 16px 36px -32px rgba(35, 20, 80, .45);
  transition: transform .2s cubic-bezier(.22, .8, .3, 1), border-color .2s ease, box-shadow .2s ease;
}
.hy-atajos a:hover, .hy-atajos a:focus-visible { transform: translateY(-3px); border-color: #ddd4f8; box-shadow: 0 22px 44px -28px rgba(76, 29, 149, .45); }
.hy-atajos i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f3eefe; color: #6d28d9; flex: none; }
.hy-atajos svg { width: 16px; height: 16px; }

/* ── EL BUSCADOR Y LOS ATAJOS, AL PRINCIPIO DE LAS CATEGORÍAS ──────────
   Es donde lleva «Buscar ayuda». En escritorio, el buscador con sus
   búsquedas frecuentes a la izquierda y los cuatro atajos de dos en dos a
   la derecha; en estrecho, uno debajo de otro. `.hy-sec` arranca sin
   relleno arriba —se lo ponía el banner—, así que el aire lo pone esto. */
.hy-bajo { display: grid; gap: 18px 44px; padding: clamp(30px, 3.2vw, 52px) 0 clamp(34px, 3.4vw, 54px); }
.hy-bajo-busca { min-width: 0; }
@media (min-width: 1041px) {
  .hy-bajo { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; }
  .hy-bajo .hy-atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ LAS CUATRO SECCIONES DE DEBAJO DEL BANNER, CALCADAS A SUS MAQUETAS ════
   Categorías, artículos, soporte y cierre, según las cuatro maquetas del
   dueño del 2026-10-03. Medidas con un contador de píxeles, no a ojo.

   LAS MAQUETAS LLEGARON A CUATRO ESCALAS (1672, 1672, 2000 y 1849 px de
   ancho), así que cada sección se mide en «píxeles de SU maqueta» por --u, y
   --u es el ancho útil de la página entre lo que ocupa el contenido en esa
   maqueta: 1526 px en la de categorías, 1576 en la de artículos, 1897 en la
   de soporte y 1700 en la del cierre. Cada una es su maqueta a escala.

   Los tamaños de letra llevan suelo: en la ventana del dueño (1280 de ancho)
   --u sale 0,75 y la letra pequeña de las maquetas bajaría de 11 px.

   Los dibujos son recortes de las propias maquetas, con los bordes que tocan
   la página difuminados: por eso cada fondo lleva el color de su maqueta. */
.hy-sec, .hy-sec-cierre {
  --c: calc(min(100vw, 1680px) - 2 * clamp(18px, 4.66vw, 78px));
  --k: calc(var(--c) / 1526);
  /* Los dibujos se salen por la derecha hasta el borde, como en las maquetas
     (es su difuminado); `clip` corta el sobrante sin crear barra de
     desplazamiento ni romper la barra pegajosa. */
  overflow-x: clip;
}
#categorias { --u: var(--k); }
#articulos { --u: calc(var(--k) * 1526 / 1576); }
#contacto { --u: calc(var(--k) * 1526 / 1897); }
.hy-sec-cierre { --u: calc(var(--k) * 1526 / 1700); }

/* Lo común: la etiqueta con su icono, el titular con la palabra morada y las
   dos rayitas que le siguen. */
.hy-eti { display: flex; align-items: center; gap: calc(16 * var(--u)); margin: 0; font-size: max(12.5px, calc(17.3 * var(--u))); line-height: 1.3; font-weight: 600; color: #50506c; }
.hy-eti > svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); min-width: 15px; min-height: 15px; flex: none; color: #6428e0; }
.hy-tit { margin: 0; font-family: var(--font-display, inherit); font-weight: 800; letter-spacing: -.03em; color: #0a0a12; }
.hy-tit .hy-grad, .hy-cierre h2 .hy-grad { color: #6e1ceb; }
.hy-rayas { display: inline-block; width: .6em; height: .6em; margin-left: .16em; vertical-align: .3em; fill: none; stroke: #6e1ceb; stroke-width: 5; stroke-linecap: round; }
.hy-chispa { display: block; color: #6820ec; }
/* El punto de Plus Jakarta Sans deja aire tras la «o»: en la maqueta va pegado. */
.hy-pt { margin-left: -.05em; }
.hy-chispa > svg { display: block; width: 100%; height: 100%; }

/* ── 2 · CATEGORÍAS · maqueta de 1672; las tarjetas, de x=76 a 1602 ─────── */
.hy-sec { padding-top: 0; padding-bottom: calc(60 * var(--u)); }
/* La cabecera: el texto a 42 de la tarjeta de la izquierda y el dibujo desde
   x=614 con su ancho de 982, saliéndose 64 por la derecha como en la maqueta
   (ese trozo es el difuminado). */
.hy-cab { position: relative; min-height: calc(470 * var(--u)); }
.hy-cab-tx { position: relative; z-index: 1; max-width: calc(640 * var(--u)); padding: calc(97 * var(--u)) 0 0 calc(42 * var(--u)); }
.hy-cab-tx .hy-tit { margin-top: calc(33 * var(--u)); font-size: max(30px, calc(81.4 * var(--u))); line-height: .92; }
.hy-cab-p { margin: calc(27 * var(--u)) 0 0; max-width: 25em; font-size: max(14px, calc(22.7 * var(--u))); line-height: 1.48; color: #60607c; }
.hy-cab-ilus { position: absolute; top: 0; left: calc(614 * var(--u)); width: calc(982 * var(--u)); pointer-events: none; }
.hy-cab-ilus img, .hy-arts-ilus img, .hy-panel-ilus img, .hy-sop-ilus img, .hy-cierre-ilus img { display: block; width: 100%; height: auto; }

/* LAS OCHO TARJETAS. Cada una es un botón que filtra los artículos de abajo:
   la losa con su icono a la izquierda, el título y su línea, y debajo la
   pastilla con la cuenta y la flecha redonda. */
.hy-cats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(21 * var(--u)) calc(18 * var(--u)); margin-top: calc(12 * var(--u)); }
.hy-cat {
  display: grid; grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: calc(18 * var(--u)); align-items: start;
  padding: calc(20 * var(--u)) calc(17 * var(--u)) calc(16 * var(--u)) calc(19 * var(--u));
  border-radius: calc(20 * var(--u)); background: #fdfdfd; border: 1px solid #f1eefb;
  box-shadow: 0 calc(22 * var(--u)) calc(44 * var(--u)) calc(-30 * var(--u)) rgba(76, 52, 160, .3);
  font: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: transform .2s cubic-bezier(.22, .8, .3, 1), border-color .2s ease, box-shadow .2s ease;
}
.hy-cat:hover, .hy-cat:focus-visible { transform: translateY(-3px); border-color: #ddd4f8; box-shadow: 0 calc(26 * var(--u)) calc(48 * var(--u)) calc(-28 * var(--u)) rgba(76, 29, 149, .42); }
.hy-cat:focus-visible { outline: 2px solid #6e1ceb; outline-offset: 3px; }
.hy-cat.is-on { border-color: #7c3aed; box-shadow: 0 calc(24 * var(--u)) calc(46 * var(--u)) calc(-26 * var(--u)) rgba(76, 29, 149, .5); }
.hy-cat-ic { display: grid; place-items: center; aspect-ratio: 96 / 90; border-radius: calc(16 * var(--u)); background: #f0ebfd; }
.hy-cat-ic img, .hy-art-ic img, .hy-rc-ic img, .hy-sc-ic img { width: 72%; height: 72%; object-fit: contain; }
.hy-cat-tx { display: grid; min-width: 0; padding-top: calc(5 * var(--u)); }
/* 19,8 y no los 20,5 medidos: Inter es algo más ancha que la letra de la
   maqueta, y con 20,5 «Calendario y reservas» saltaba de renglón. */
.hy-cat-tx b { font-size: max(14px, calc(19.8 * var(--u))); line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: #0d0c2b; }
.hy-cat-p { margin-top: calc(8 * var(--u)); font-size: max(13px, calc(16.2 * var(--u))); line-height: 1.6; color: #6e6e86; }
.hy-cat-pie { grid-column: 2; align-self: end; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: calc(19 * var(--u)); }
.hy-cat-n { display: inline-flex; align-items: center; min-height: max(24px, calc(33 * var(--u))); padding: 0 calc(17 * var(--u)); border-radius: 999px; background: #f0e9fc; font-size: max(12px, calc(13.9 * var(--u))); font-weight: 500; color: #6c48b4; white-space: nowrap; }
.hy-cat-ir, .hy-art-ir, .hy-rc-ir, .hy-sc-ir { display: grid; place-items: center; flex: none; border-radius: 50%; background: #ece8fc; color: #5b17c9; transition: transform .2s ease, background .2s ease; }
.hy-cat-ir { width: max(30px, calc(46 * var(--u))); height: max(30px, calc(46 * var(--u))); }
.hy-cat-ir svg, .hy-art-ir svg, .hy-rc-ir svg, .hy-sc-ir svg { width: 38%; height: 38%; }
.hy-cat:hover .hy-cat-ir, .hy-rc:hover .hy-rc-ir, .hy-sc:hover .hy-sc-ir, .hy-art-ir:hover { transform: translateX(3px); background: #e2dafc; }

/* ── 3 · ARTÍCULOS · maqueta de 1672; los paneles, de x=50 a 1626 ─────── */
#articulos.hy-sec { padding-top: calc(33 * var(--u)); padding-bottom: calc(40 * var(--u)); }
.hy-dos { display: grid; grid-template-columns: minmax(0, 926fr) minmax(0, 631fr); gap: calc(19 * var(--u)); align-items: start; }
/* EL PANEL DE LA IZQUIERDA. El dibujo va en su esquina de arriba a la
   derecha, recortado por el propio panel, y la primera ficha le pisa el pie
   como en la maqueta. */
.hy-arts { position: relative; overflow: hidden; padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); border-radius: calc(26 * var(--u)); background: linear-gradient(180deg, #fafafe 0%, #f5f3fd 100%); }
.hy-arts-cab { position: relative; z-index: 1; min-height: calc(221 * var(--u)); padding: 0 0 calc(26 * var(--u)) calc(13 * var(--u)); }
.hy-tit--panel { margin-top: calc(20 * var(--u)); font-size: max(28px, calc(63 * var(--u))); line-height: .89; }
/* Hasta donde empieza el dibujo: el resumen cambia con el filtro y el de
   partida es más largo que el «4 artículos en este tema» de la maqueta. */
.hy-arts-res { margin: calc(17 * var(--u)) 0 0; max-width: calc(400 * var(--u)); font-size: max(13px, calc(17.7 * var(--u))); line-height: 1.4; color: #6c6c84; }
.hy-arts-ilus { position: absolute; z-index: 0; top: calc(-32 * var(--u)); right: calc(-20 * var(--u)); width: calc(476 * var(--u)); pointer-events: none; }
.hy-arts-cab > :not(.hy-arts-ilus) { position: relative; z-index: 1; }
.hy-lista { position: relative; z-index: 1; display: grid; gap: calc(11 * var(--u)); }
/* CADA FICHA, ABIERTA: losa con su icono, título, el sitio de Cuho donde está
   y la respuesta entera; la flecha lleva a ese sitio dentro de Cuho. */
.hy-art {
  display: grid; grid-template-columns: calc(125 * var(--u)) minmax(0, 1fr) auto; column-gap: calc(30 * var(--u)); align-items: start;
  padding: calc(16 * var(--u)) calc(17 * var(--u)) calc(13 * var(--u));
  border-radius: calc(20 * var(--u)); background: #fcfbfe; border: 1px solid #f0edfa;
  box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-24 * var(--u)) rgba(76, 52, 160, .2);
}
/* `display: grid` le gana al atributo `hidden` (que es un `display: none` del
   navegador), y el filtro esconde fichas con `hidden`: sin esto salían las
   veintiuna siempre, y «Ver todos» no se iba nunca. */
.hy-art[hidden], .hy-mas[hidden] { display: none; }
.hy-art-ic { display: grid; place-items: center; aspect-ratio: 125 / 108; border-radius: calc(20 * var(--u)); background: #f0ecfc; }
.hy-art-tx { min-width: 0; }
.hy-art-tx h3 { margin: 0; font-size: max(14px, calc(18.7 * var(--u))); line-height: 1.3; font-weight: 700; color: #0b0b17; }
.hy-art-sitio { display: inline-flex; align-items: center; margin-top: calc(7 * var(--u)); padding: calc(5 * var(--u)) calc(15 * var(--u)); border-radius: 999px; background: #f0ecfc; font-size: max(12px, calc(13.5 * var(--u))); font-weight: 500; line-height: 1.25; color: #6440b0; }
.hy-art-tx p { margin: calc(8 * var(--u)) 0 0; font-size: max(13px, calc(14.6 * var(--u))); line-height: 1.42; color: #7a7a90; }
.hy-art-ir { width: max(30px, calc(45 * var(--u))); height: max(30px, calc(45 * var(--u))); margin-top: calc(22 * var(--u)); }
.hy-art-ir:focus-visible, .hy-rc:focus-visible, .hy-sc:focus-visible { outline: 2px solid #6e1ceb; outline-offset: 3px; }
.hy-vacio { margin: calc(18 * var(--u)) calc(13 * var(--u)) 0; font-size: max(13px, calc(15 * var(--u))); line-height: 1.6; color: #6c6c84; }
.hy-mas {
  display: inline-flex; align-items: center; gap: .6em; margin: calc(18 * var(--u)) 0 0 calc(13 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: max(13px, calc(15.5 * var(--u))); font-weight: 700; color: #6e1ceb;
}
.hy-mas svg { width: 1.1em; height: 1.1em; transition: transform .18s ease; }
.hy-mas:hover svg { transform: translateX(3px); }

/* LA COLUMNA DE LA DERECHA: vídeos (todavía no grabados) y recursos. */
.hy-lado { display: grid; gap: calc(17 * var(--u)); }
.hy-panel { position: relative; overflow: hidden; border-radius: calc(26 * var(--u)); background: linear-gradient(180deg, #fafafe 0%, #f6f4fe 100%); }
.hy-panel--video { min-height: calc(307 * var(--u)); padding: calc(31 * var(--u)) calc(31 * var(--u)) calc(28 * var(--u)); }
.hy-panel--video > :not(.hy-panel-ilus) { position: relative; z-index: 1; }
.hy-eti--video { gap: calc(14 * var(--u)); font-size: max(12.5px, calc(17.9 * var(--u))); }
.hy-eti--video > svg { width: calc(27 * var(--u)); height: calc(27 * var(--u)); color: #8b5cf6; }
.hy-tit--lado { margin-top: calc(25 * var(--u)); font-size: max(20px, calc(38 * var(--u))); line-height: 1.1; }
.hy-panel-p { margin: calc(19 * var(--u)) 0 0; max-width: calc(326 * var(--u)); font-size: max(13px, calc(15.4 * var(--u))); line-height: 1.56; color: #747488; }
.hy-panel-ilus { position: absolute; z-index: 0; top: 0; right: 0; width: calc(274 * var(--u)); pointer-events: none; }
.hy-panel--rec { padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); }
.hy-panel--rec > .hy-eti, .hy-panel--rec > .hy-tit, .hy-panel--rec > .hy-panel-p { margin-left: calc(10 * var(--u)); }
.hy-panel--rec .hy-eti { font-size: max(12.5px, calc(17.8 * var(--u))); }
.hy-panel--rec .hy-tit--lado { margin-top: calc(11 * var(--u)); line-height: .9; }
.hy-panel--rec .hy-panel-p { margin-top: calc(21 * var(--u)); max-width: calc(410 * var(--u)); font-size: max(13px, calc(17.3 * var(--u))); line-height: 1.42; color: #6c6c84; }
.hy-rec { display: grid; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.hy-rc {
  display: grid; grid-template-columns: calc(87 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(30 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(18 * var(--u));
  background: #fcfbfe; border: 1px solid #f0edfa; box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) calc(-22 * var(--u)) rgba(76, 52, 160, .2);
  text-decoration: none; color: inherit; transition: transform .2s cubic-bezier(.22, .8, .3, 1), border-color .2s ease;
}
.hy-rc:hover { transform: translateY(-2px); border-color: #ddd4f8; }
.hy-rc-ic { display: grid; place-items: center; aspect-ratio: 87 / 66; border-radius: calc(16 * var(--u)); background: #f0ecfc; }
.hy-rc-tx { min-width: 0; }
.hy-rc-tx b { display: block; font-size: max(14px, calc(17.3 * var(--u))); line-height: 1.3; font-weight: 700; color: #0b0b17; }
.hy-rc-tx > span { display: block; margin-top: calc(4 * var(--u)); font-size: max(12.5px, calc(14.7 * var(--u))); line-height: 1.4; color: #7e7e94; }
.hy-rc-ir { width: max(28px, calc(45 * var(--u))); height: max(28px, calc(45 * var(--u))); }

/* ── 4 · SOPORTE · maqueta de 2000; el panel, de x=53 a 1950 ──────────── */
#contacto.hy-sec { padding-top: calc(73 * var(--u)); padding-bottom: calc(64 * var(--u)); }
.hy-sop { position: relative; overflow: hidden; padding: 0 calc(34 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u)); border-radius: calc(38 * var(--u)); background: linear-gradient(180deg, #f8f6fe 0%, #f2f0fc 100%); }
.hy-sop-cab { position: relative; min-height: calc(410 * var(--u)); }
.hy-sop-tx { position: relative; z-index: 1; padding: calc(57 * var(--u)) 0 0 calc(57 * var(--u)); }
.hy-sop-tx .hy-chispa { width: calc(36 * var(--u)); height: calc(38 * var(--u)); min-width: 20px; min-height: 20px; }
.hy-tit--sop { margin-top: calc(13 * var(--u)); font-size: max(28px, calc(81 * var(--u))); line-height: .975; }
.hy-sop-p { margin: calc(21 * var(--u)) 0 0; font-size: max(14px, calc(29.8 * var(--u))); line-height: 1.48; color: #747494; }
.hy-sop-ilus { position: absolute; top: 0; right: calc(-34 * var(--u)); width: calc(1120 * var(--u)); pointer-events: none; }
.hy-sop-c { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(29 * var(--u)); }
.hy-sc {
  display: grid; grid-template-columns: calc(142 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(30 * var(--u));
  min-height: calc(175 * var(--u)); padding: calc(20 * var(--u)) calc(19 * var(--u)) calc(20 * var(--u)) calc(23 * var(--u));
  border-radius: calc(28 * var(--u)); background: #f9f9fd; border: 1px solid #eeecf8;
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) calc(-26 * var(--u)) rgba(76, 52, 160, .22);
  text-decoration: none; color: inherit; transition: transform .2s cubic-bezier(.22, .8, .3, 1), border-color .2s ease;
}
.hy-sc:hover { transform: translateY(-3px); border-color: #ddd4f8; }
.hy-sc-ic { display: grid; place-items: center; aspect-ratio: 142 / 119; border-radius: calc(24 * var(--u)); background: #f2f0fe; }
.hy-sc-ic img { width: 66%; height: 66%; }
.hy-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9%; width: 54%; }
.hy-logos img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(60, 30, 120, .2)); }
.hy-sc-tx { min-width: 0; }
.hy-sc-tx b { display: block; font-size: max(15px, calc(27 * var(--u))); line-height: 1.25; font-weight: 700; color: #0b0b2c; }
.hy-sc-tx > span { display: block; margin-top: calc(5 * var(--u)); font-size: max(13px, calc(19.4 * var(--u))); line-height: 1.5; color: #7e7e9a; overflow-wrap: anywhere; }
.hy-sc-ir { width: max(32px, calc(65 * var(--u))); height: max(32px, calc(65 * var(--u))); background: #ece6fc; }

/* ── 5 · EL CIERRE · maqueta de 1849; el contenido, de x=98 a 1798 ────── */
.hy-sec-cierre { padding-top: calc(30 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.hy-cierre { position: relative; display: flex; align-items: center; min-height: calc(760 * var(--u)); }
.hy-cierre-tx { position: relative; z-index: 1; width: calc(720 * var(--u)); }
.hy-cierre-tx .hy-chispa { width: calc(36 * var(--u)); height: calc(39 * var(--u)); min-width: 20px; min-height: 20px; }
.hy-cierre h2 { margin: calc(11 * var(--u)) 0 0; font-family: var(--font-display, inherit); font-size: max(30px, calc(77 * var(--u))); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; color: #0a0a12; }
.hy-cierre-tx > p { margin: calc(29 * var(--u)) 0 0; max-width: 24.5em; font-size: max(14px, calc(25.4 * var(--u))); line-height: 1.5; color: #6c6c8c; }
.hy-cta {
  display: inline-flex; align-items: center; gap: calc(22 * var(--u)); margin-top: calc(42 * var(--u));
  min-height: max(48px, calc(90 * var(--u))); padding: 0 calc(58 * var(--u)) 0 calc(60 * var(--u)); border-radius: 999px;
  background: #6820ec; color: #fff; text-decoration: none; font-size: max(15px, calc(29.8 * var(--u))); font-weight: 600;
  box-shadow: 0 calc(22 * var(--u)) calc(44 * var(--u)) calc(-20 * var(--u)) rgba(104, 32, 236, .6);
  transition: background .2s ease, transform .2s cubic-bezier(.22, .8, .3, 1);
}
.hy-cta svg { width: 1em; height: 1em; }
.hy-cta:hover { background: #5716cf; transform: translateY(-2px); }
.hy-cta:focus-visible { outline: 2px solid #6820ec; outline-offset: 4px; }
/* `left` se mide desde el borde del RELLENO de `.hy-cierre`, que es la propia
   caja con su margen lateral: por eso se suma ese margen. Sin él el dibujo
   salía 78 px a la izquierda de su sitio, encima de la entradilla. */
.hy-cierre-ilus { position: absolute; top: 50%; left: calc(clamp(18px, 4.66vw, 78px) + 602 * var(--u)); width: calc(1149 * var(--u)); transform: translateY(-50%); pointer-events: none; }
/* Las rayitas del cierre van más altas y más pegadas, como en su maqueta. */
.hy-cierre h2 .hy-rayas { width: .72em; height: .72em; margin-left: .04em; vertical-align: .36em; }

@media (prefers-reduced-motion: reduce) {
  .hy-cat, .hy-rc, .hy-sc, .hy-cta, .hy-cat-ir, .hy-art-ir, .hy-rc-ir, .hy-sc-ir { transition: none; }
  .hy-cat:hover, .hy-cat:focus-visible, .hy-rc:hover, .hy-sc:hover, .hy-cta:hover { transform: none; }
}

@media (max-width: 1240px) {
  .hy-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  /* EN ESTRECHO SE APILA, y la escala deja de ser la de la maqueta: una fija
     que mantiene las proporciones con letra que se lee. */
  .hy-sec, .hy-sec-cierre { --k: clamp(.52px, calc(100vw / 1200), .72px); }
  .hy-h { grid-template-columns: 1fr; row-gap: 30px; padding-top: 34px; padding-bottom: 40px; }
  .hy-h-tx { text-align: center; }
  .hy-sub { margin-left: auto; margin-right: auto; }
  .hy-ante, .hy-botones, .hy-ticks { justify-content: center; }
  .hy-ilus { justify-self: center; width: min(100%, 560px); max-width: 100%; margin-right: 0; }
  .hy-cab { min-height: 0; }
  .hy-cab-tx { max-width: none; padding: 34px 0 0; }
  .hy-cab-ilus { position: static; width: min(100%, 640px); margin: 18px auto 0; }
  .hy-dos { grid-template-columns: 1fr; }
  .hy-sop-cab { min-height: 0; }
  .hy-sop-tx { padding: 34px 0 0 6px; }
  .hy-sop-ilus { position: static; width: 100%; margin: 14px 0 6px; }
  .hy-sop-c { grid-template-columns: 1fr; }
  .hy-cierre { display: block; min-height: 0; padding-top: 24px; }
  .hy-cierre-tx { width: auto; }
  .hy-cierre-ilus { position: static; width: 100%; margin-top: 20px; transform: none; }
}
@media (max-width: 720px) {
  .hy-atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hy-cats { grid-template-columns: 1fr; }
  .hy-busca { flex-wrap: wrap; border-radius: 20px; }
  .hy-busca input { width: 100%; }
  .hy-busca-b { width: 100%; }
  /* La ficha en el móvil: la losa más pequeña y la flecha debajo del texto. */
  .hy-art { grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
  .hy-art-ir { grid-column: 2; margin-top: 10px; }
  .hy-arts-ilus { position: static; width: 72%; margin: -6px 0 6px auto; }
  .hy-arts-cab { min-height: 0; }
  .hy-sc { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 16px; min-height: 0; padding: 14px; }
}
@media (max-width: 520px) {
  .hy-atajos { grid-template-columns: 1fr; }
  .hy-botones { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOS CINCO BLOQUES DE LA PORTADA  ·  prefijo bq-
   ──────────────────────────────────────────────────────────────────────────
   Encargo del 2026-09-23 con cinco maquetas delante (imágenes 37 a 41, de
   1672x941 cada una). Las medidas de aquí abajo NO son a ojo: salen de leer
   los píxeles de esas imágenes, que es lo único que distingue «parecido» de
   «calcado». Las que más mandan:

     · el contenido va de 58 a 1618 sobre 1672 de papel — el 93 % —, y no de
       lado a lado; con `--wrap: 1180px` en una pantalla de 1750 sobraban
       310 px a cada lado y por eso ninguna maqueta salía;
     · tres tarjetas de 500 px con 34 px de aire: 29,9 % y 2,03 % del papel;
     · la tarjeta es #fcfbfe arriba y #f9f8fd abajo, no blanca;
     · dentro, la burbuja del cliente es blanca y la de Cuho #ede7fb;
     · el papel de la maqueta va de #f7f5ff arriba a #eae4fd abajo. Eso YA lo
       hace el degradado del sitio, que va fijo a la ventana, así que aquí no
       se pinta ningún fondo de sección: pintarlo dejaría un escalón en cada
       junta —cada imagen vuelve a empezar clara— y sacaría al texto de la ley
       de contraste, que mide contra ese degradado y no contra otro.

   Y UNA REGLA DE LA CASA QUE AQUÍ PESA: el marcado de las pantallas usa `b`,
   `s`, `u`, `i` y `em` a punta pala porque son dibujos y no hay que nombrarlos.
   Eso significa que CUALQUIER regla de la hoja con forma `.padre tag` (0,1,1)
   le gana a una mía de una sola clase (0,1,0). Por eso todo lo de abajo cuelga
   siempre de un ancestro `.bq-`, sin excepción. Lo vigila la ley 8 de
   `bk-canales-y-ayuda-cuentan-lo-que-hay`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── EL ANCHO ───────────────────────────────────────────────────────────── */
.bq-sec .mk-wrap {
  max-width: 1680px;
  padding-left: clamp(18px, 3.4vw, 58px);
  padding-right: clamp(18px, 3.4vw, 58px);
}
.bq-sec { padding: 0 0 clamp(34px, 4.4vw, 64px); position: relative; }
.bq-funciones { padding-top: clamp(34px, 3.4vw, 58px); }
/* El bloque 1 no lleva titular: su cabecera es sólo la percha de la nota a
   mano, así que no ocupa ni una línea. La nota sube al hueco que queda entre
   la maqueta de la herramienta y las tres tarjetas; a ras de la cabecera se
   sentaba encima del título de «Recupera». */

/* El navegador tacha los `s` y subraya los `u`. Aquí no son eso: son la
   segunda línea de una ficha y la hora de un mensaje. */
.bq-sec s, .bq-sec u, .bq-sec i, .bq-sec em { text-decoration: none; font-style: normal; }

/* ── LA CABECERA DE CADA BLOQUE ─────────────────────────────────────────── */
.bq-cab { position: relative; text-align: center; margin: 0 auto clamp(26px, 3vw, 44px); }
.bq-pill {
  display: inline-block; margin: 0 0 clamp(14px, 1.6vw, 22px);
  padding: clamp(8px, .66vw, 11px) 0;
  color: #5b21b6; font-size: clamp(13px, 1.2vw, 20px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em;
}
.bq-cab .bq-h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(29px, 3.3vw, 55px); font-weight: 800; line-height: 1.08;
  letter-spacing: -.032em; color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.bq-mor { color: var(--violet); }
.bq-sub {
  max-width: 745px; margin: 0 auto;
  color: var(--muted); font-size: clamp(15.5px, 1.23vw, 20.5px); line-height: 1.5;
}

/* ── LAS NOTAS A MANO ───────────────────────────────────────────────────── */
.bq-nota {
  position: absolute; margin: 0; z-index: 3; pointer-events: none;
  font-family: var(--font-mano, 'Caveat', cursive);
  font-size: clamp(17px, 1.42vw, 23px); line-height: 1.14;
  color: var(--violet); text-align: center;
}
.bq-curva {
  position: absolute; width: 40px; height: 50px; fill: none;
  stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* SE APARTA DEL BORDE LO QUE MIDEN SUS RAYITAS. Iban en `left: 100%` de una
   nota puesta en `right: 0`, o sea colgando FUERA del contenedor: el navegador
   se comía la tercera y en la página sólo salían dos. La maqueta tiene tres.
   El hueco es el ancho de `::after` (1,5em) más su margen (0,3em). */
.bq-nota--der { right: 1.9em; top: 46px; transform: rotate(-4deg); }
.bq-nota--der .bq-curva { right: 34px; top: 100%; }
.bq-nota--cierre { right: clamp(6px, 1.6vw, 26px); bottom: 34px; transform: rotate(-4deg); }
.bq-nota--cierre .bq-curva { right: 46px; top: 90%; }

/* Las tres rayitas que la maqueta pone junto a cada nota a mano. */
.bq-nota::after {
  content: ''; position: absolute; left: 100%; top: 6px;
  width: 1.5em; height: 1.4em; margin-left: .3em;
  background: var(--violet);
  -webkit-mask: var(--bq-tics) center / contain no-repeat;
  mask: var(--bq-tics) center / contain no-repeat;
  --bq-tics: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'><g fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'><path d='M6 20 L10 7'/><path d='M15 21 L19 6'/><path d='M24 20 L27 9'/></g></svg>");
  opacity: .6;
}

/* ── LAS REJILLAS ───────────────────────────────────────────────────────── */
.bq-tres, .bq-dos {
  display: grid; align-items: stretch;
  gap: clamp(14px, 2.03vw, 34px);
}
.bq-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bq-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ══ EL PAPEL DE «CASOS DE USO» ══════════════════════════════════════════
   El dueño: «aquí ves un fondo bonito… le subes la imagen a ChatGPT y le
   dices, dame el fondo de manera separada». Eso es exactamente lo que se
   hizo: se le subió SU maqueta y se le pidió el papel sin las tarjetas, sin
   el texto y sin los globos. Salió a 2048x768 y pesa 9 KB en webp.

   `100% 100%` y no `cover`: la razón del dibujo (2,67) y la de este bloque
   cambian con la ventana, y con `cover` se recortarían justo los pétalos de
   las esquinas, que son TODO lo que tiene este fondo. Estirar un degradado
   abstracto no se ve; perder su composición sí. Es la misma lección del
   banner de arriba, donde `cover` enseñaba la franja más pálida del dibujo.

   Sin velo: el dibujo se pidió ya con la franja central clara —del 12 % al
   88 % del ancho— porque ahí van tarjetas blancas y texto oscuro. Lo que
   decide si eso vale no es el encargo, es la medida: está comprobado abajo
   con el contraste del subtítulo y de la píldora. */


/* ══ UN SOLO PAPEL PARA TODA LA PÁGINA ═══════════════════════════════════
   El dueño, después de ver un dibujo por bloque: «que el fondo sea común
   para todo… son bonitos, pero parece muy raro… que sea un fondo más común
   entre todos, no que sea totalmente vertical».

   Tenía razón y el motivo es de bulto: cada bloque estiraba SU dibujo dentro
   de SU caja con `100% 100%`, así que en cada frontera entre bloques el
   patrón se cortaba de golpe. Ocho bloques, siete costuras horizontales.

   Ahora el papel es UNO y va en el `body`, con `background-attachment: fixed`:
   cubre la ventana y no se mueve al bajar, así que NO PUEDE tener costuras
   —no hay repetición, no hay recorte por bloque, no hay frontera—. La
   separación entre bloques la hacen el aire y el ritmo, que es como se hace.

   Los cinco dibujos por bloque se quedan en el repositorio: no se borran
   porque volver a pedírselos a ChatGPT cuesta, y la decisión de cuál usar es
   del dueño. El que manda es el que nombra esta regla. */


/* Y EL ALTO, recortado como en los otros bloques: aire, no letra. */
#bq-casos { padding-top: 6px; padding-bottom: 8px; }
#bq-casos .bq-cab { margin-bottom: 6px; }
#bq-casos .bq-pill { margin-bottom: 7px; padding: 5px 0; font-size: clamp(10px, .82vw, 11.5px); }
#bq-casos .bq-cab h2 { font-size: clamp(20px, 2vw, 30px); line-height: 1.06; margin-bottom: 7px; }
#bq-casos .bq-cab .bq-sub { font-size: clamp(11.5px, .95vw, 13.5px); line-height: 1.4; margin: 0 auto; }
#bq-casos .bq-card { padding: clamp(9px, .78vw, 13px); }
#bq-casos .bq-card-h { margin-bottom: clamp(6px, .55vw, 9px); }
#bq-casos .bq-m { gap: clamp(4px, .4vw, 7px); }
#bq-casos .bq-col { gap: clamp(4px, .4vw, 7px); }


/* ══ «ATIENDE · CONVIERTE · RECUPERA» CABE EN UNA PANTALLA ═══════════════
   El dueño: «que se vea todo de una directamente en la página, bloque en
   bloque, y que se vea el bloque». A su ventana —1.280x585 con zoom 1,5— el
   alto útil son 514 px y este bloque medía 656. Repartidos, los 656 eran:

     relleno de la sección    43 + 56 = 99
     margen bajo la cabecera          38
     las tres tarjetas               480
     el pie de datos de ejemplo   20 + 19

   Se recorta AIRE, no letra: las tarjetas ya están casi todas en el SUELO de
   sus `clamp` a este ancho —`clamp(9.17px, 0.71vw, 11.87px)` da 9,17 a 1.265—
   así que bajarlas más es hacerlas ilegibles, no compactas.

   Y va acotado a `#bq-funciones` a propósito: los otros cuatro bloques `bq-`
   comparten estas reglas y el dueño no ha pedido tocarlos. */
/* ── LA CABECERA DE CADA TARJETA, A LA MEDIDA DEL DIBUJO ─────────────────
   Medido en la maqueta 55 llevada a la ventana del dueño: «Atiende» ocupa 14
   px de tinta y su explicación 12 de cuerpo con 16 de paso. Los míos iban a
   16 y a 15,2 con 21,6 de paso. Por tarjeta eso son 27 px de alto, y como las
   tres van en fila, 27 px del bloque entero.
   Y ESE ES EL SITIO QUE FALTABA. No sobraba en las pantallas —las suyas y las
   mías miden lo mismo, 338 y 339— sino aquí arriba: yo gastaba en presentar
   la tarjeta lo que él gasta en enseñar el producto. */
/* ── LOS DOS BLOQUES QUE SE SALÍAN DE LA PANTALLA ────────────────────────
   Medido a la ventana del dueño —501 px útiles—: «gestión» ocupaba 771 y
   «preguntas» 821, o sea que los dos se veían a medias y había que bajar
   dentro de ellos. Primero se les iguala la cabecera a la de «casos de
   uso», que es la escala que él ya aceptó y que quita unos 100 px de cada
   uno; lo que queda lo pone el zoom.
   EL ZOOM ES EL JUSTO PARA CABER. Con la medida buena —el `zoom` se
   pregunta a cada padre y se multiplica, que `font-size` solo no lo
   lleva— la letra más chica queda en 5,76 y 6,78 px. La de «casos de uso»,
   que está publicada y aprobada, se pinta a 5,93. */
/* EL ZOOM DE GESTIÓN, EL JUSTO PARA CABER en los 501 de su pantalla. El
   de las preguntas frecuentes (.84) y el de casos (.76, en su carrusel) van
   con su bloque, al final de la hoja: medidos con su marcado de hoy. */
#bq-gestion { zoom: .74; --z: .74; }
#bq-plantillas .bq-cab, #bq-gestion .bq-cab, #bq-faq .bq-cab { margin-bottom: clamp(10px, 1vw, 16px); }
#bq-plantillas .bq-cab .bq-h2, #bq-gestion .bq-cab .bq-h2, #bq-faq .bq-cab .bq-h2 { font-size: clamp(20px, 2vw, 30px); line-height: 1.06; margin: 0 0 6px; }
#bq-plantillas .bq-cab .bq-sub, #bq-gestion .bq-cab .bq-sub, #bq-faq .bq-cab .bq-sub { font-size: clamp(11.5px, .95vw, 13.5px); line-height: 1.4; margin: 0 auto; }
#bq-plantillas .bq-pill, #bq-gestion .bq-pill, #bq-faq .bq-pill {
  margin-bottom: clamp(7px, .7vw, 11px); padding: clamp(4px, .4vw, 6px) 0;
  font-size: clamp(9.5px, .8vw, 12px);
}

/* ── EL ZOOM DEL BLOQUE, QUE ES LO QUE PIDIÓ EL DUEÑO ────────────────────
   «Hacer un zoom, al igual que hicimos dentro de la herramienta, para que haya
   más espacio y así ajustar todos los bloques.»
   CON EL TITULAR Y LAS CINCO NOTAS DEL DIBUJO, EL BLOQUE MIDE 573. Su pantalla
   da 501: la ventana de 585 menos los 84 que se queda la barra. Y no es que yo
   lo hiciera grande: la maqueta 55 tiene la misma proporción que su ventana, o
   sea que LLEVADA A SU ANCHO MIDE TAMBIÉN 573. El dibujo no cabía.
   EL SUELO DE LETRA, MEDIDO DE VERDAD. Venía midiendo `font-size` y eso NO
   lleva el zoom: el bloque de al lado —«casos de uso», que él dio por bueno—
   decía 8,4 px y se pinta a 5,93, porque va con `zoom: .705`. Preguntando el
   zoom a cada padre y multiplicándolo, aquí la letra más chica queda en 7,3:
   más grande que la del bloque que ya aceptó. */
#bq-funciones { zoom: .87; --z: .87; }

/* ── EL TITULAR DEL BLOQUE, A LA ESCALA CHICA ────────────────────────────
   Los otros bloques lo llevan a 41,7 px. Aquí no hay sitio para eso: con el
   titular grande el bloque se iba a 616 y la pantalla del dueño da 501. Va a
   la escala que él ya dio por buena en «casos de uso» —25,3 y 12— que cabe y
   además deja los dos titulares seguidos de tamaños distintos en su sitio:
   el de arriba manda, éste acompaña. */
#bq-funciones .bq-cab--fun { margin-bottom: clamp(10px, 1vw, 16px); }
#bq-funciones .bq-cab--fun .bq-h2 { font-size: clamp(20px, 2vw, 30px); line-height: 1.06; margin: 0 0 6px; }
#bq-funciones .bq-cab--fun .bq-sub { font-size: clamp(11.5px, .95vw, 13.5px); line-height: 1.4; margin: 0 auto; max-width: 760px; }
/* EL PIE, ARRIBA Y CHIQUITO. La advertencia de que los numeros son de ejemplo
   se lee mejor ANTES de los numeros que despues, y abajo ya no cabia: las tres
   notas a mano ocupaban su misma banda. */
#bq-funciones .bq-cab--fun .bq-pie { margin: 6px 0 0; font-size: clamp(10px, .82vw, 12px); }

/* ── LAS CINCO NOTAS A MANO ──────────────────────────────────────────────
   Van COLOCADAS SUELTAS, así que no empujan ni un píxel: dos a los lados del
   titular y tres colgando de cada columna. En la maqueta son lo que cuenta el
   camino —de una conversación, a una reserva, a resultados—; sin ellas las tres
   tarjetas se leen como tres cosas que no tienen que ver una con otra.
   Y POR DEBAJO DE 1.160 SE ESCONDEN: ahí las tarjetas se estrechan y las notas
   se les meterían encima del texto, que es peor que no tenerlas. */
#bq-funciones .bq-nota { font-size: clamp(14px, 1.28vw, 20px); line-height: 1.14; }
#bq-funciones .bq-nota--f1 { left: 0; top: 4px; text-align: left; }
#bq-funciones .bq-nota--f1 .bq-curva { left: 100%; top: 40%; width: 34px; height: 42px; margin-left: 2px; }
#bq-funciones .bq-nota--f2 { right: 0; top: 4px; text-align: right; }
#bq-funciones .bq-nota--f2 .bq-curva { right: 100%; top: 40%; width: 34px; height: 42px; margin-right: 2px; }
#bq-funciones .bq-nota--f3,
#bq-funciones .bq-nota--f4,
#bq-funciones .bq-nota--f5 { top: 100%; margin-top: -8px; text-align: left; left: 2px; }
#bq-funciones .bq-nota--f3 .bq-curva,
#bq-funciones .bq-nota--f4 .bq-curva,
#bq-funciones .bq-nota--f5 .bq-curva { left: 100%; bottom: 30%; width: 30px; height: 38px; margin-left: 2px; }
#bq-funciones .bq-nota--f5 { left: auto; right: 2px; text-align: right; }
/* Y EL BLOQUE LES DEJA SITIO ABAJO. Las tres cuelgan de su tarjeta, así que
   sin este hueco el filo del bloque les corta la mitad: se veían las puntas
   de las flechas y nada más. Piden 26 px y el bloque tiene 30 de margen. */
#bq-funciones .bq-nota--f5 .bq-curva { left: auto; right: 100%; margin: 0 2px 0 0; transform: scaleX(-1); }
@media (max-width: 1160px) { #bq-funciones .bq-nota { display: none; } }

#bq-funciones .bq-card-h h3 { font-size: clamp(15px, 1.48vw, 24px); margin-bottom: 3px; }
#bq-funciones .bq-card-h p { font-size: clamp(11px, 0.99vw, 16px); line-height: 1.28; }
#bq-funciones .bq-card-h { gap: clamp(9px, 0.85vw, 14px); }
#bq-funciones { padding-top: 7px; padding-bottom: 30px; }
#bq-funciones .bq-cab { margin-bottom: 6px; }
#bq-funciones .bq-pie { margin-top: 5px; }
#bq-funciones .bq-card { padding: clamp(12px, 1vw, 16px); }
#bq-funciones .bq-card-h { margin-bottom: clamp(9px, 0.85vw, 13px); }
#bq-funciones .bq-chat { gap: clamp(4px, 0.38vw, 6.5px); }
#bq-funciones .bq-chat-h { padding-bottom: clamp(4px, 0.38vw, 6.5px); }
#bq-funciones .bq-rap { margin-top: 0; padding: clamp(5px, 0.47vw, 8px); }
#bq-funciones .bq-rap > s { margin-top: 3px; }
#bq-funciones .bq-m { gap: clamp(6px, 0.6vw, 10px); }
/* LA NOTA A MANO SE SUBE MENOS, porque aquí ya no hay tanto sitio arriba.
   Con el relleno recortado quedaba en y=1571 y el bloque empieza en 1592: 21 px
   por encima. No choca con nada —el pie del bloque de arriba acaba en 1565—,
   pero cuando la rueda salta a este bloque lo deja a 84 px del borde y la barra
   pegada mide 71: sólo hay 13 px de aire, y 8 de la nota se quedaban DEBAJO de
   la barra. Subirla menos cuesta 0 px de alto; darle sitio costaba 20. */
/* Y LA FLECHA, MÁS CORTA. Cuelga del pie de la nota y con el bloque apretado
   caía encima de «Detecta oportunidades y reactiva», o sea tapando texto. A
   34 px se queda dentro del relleno de la tarjeta, que es donde apunta en la
   maqueta: señala la tarjeta, no escribe sobre ella. */
#bq-funciones .bq-nota--der .bq-curva { width: 28px; height: 34px; right: 28px; }

/* ── LA TARJETA ─────────────────────────────────────────────────────────── */
.bq-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: clamp(16px, 1.32vw, 22px);
  border-radius: clamp(20px, 1.7vw, 30px);
  background: linear-gradient(180deg, #fcfbfe 0%, #f9f8fd 100%);
  box-shadow: 0 1px 2px rgba(76, 29, 149, .04), 0 18px 40px -30px rgba(76, 29, 149, .3);
}
.bq-card-h { display: flex; align-items: flex-start; gap: clamp(11px, 1vw, 17px); margin-bottom: clamp(14px, 1.5vw, 24px); }
.bq-card-h > div { min-width: 0; flex: 1; }
.bq-card-h h3 {
  font-family: var(--font-display, inherit);
  font-size: clamp(17px, 1.7vw, 28px); font-weight: 800; letter-spacing: -.022em;
  color: var(--ink); margin: 0 0 5px; line-height: 1.16;
}
.bq-card-h p { color: var(--muted); font-size: clamp(13px, 1.2vw, 20px); line-height: 1.42; margin: 0; }

/* La baldosa del icono. El color va con el padre delante porque `.bq-ic` sola
   (0,1,0) la pierde contra cualquier `.lo-que-sea span` de la hoja. */
.bq-card .bq-ic, .bq-q .bq-ic, .bq-aj .bq-ic {
  display: grid; place-items: center; flex: none;
  width: clamp(38px, 4.55vw, 76px); height: clamp(38px, 4.55vw, 76px);
  border-radius: clamp(11px, 1.32vw, 22px);
  background: #f3eefd; color: #6d28d9;
}
.bq-card .bq-ic > svg, .bq-q .bq-ic > svg, .bq-aj .bq-ic > svg {
  width: 54%; height: 54%;
}
.bq-card .bq-ic .lgm { --k: 54%; }
.bq-aj .bq-ic--s { width: 30px; height: 30px; border-radius: 9px; }

/* La flecha redonda de la esquina (bloque 2). */
.bq-uso .bq-ir {
  display: grid; place-items: center; flex: none;
  width: clamp(32px, 2.7vw, 44px); height: clamp(32px, 2.7vw, 44px);
  border-radius: 50%; background: #f3eefd; color: #6d28d9;
  text-decoration: none; transition: background .18s ease, transform .18s ease;
}
.bq-uso .bq-ir > svg { width: 48%; height: 48%; }
.bq-uso .bq-ir > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.bq-uso .bq-ir:hover { background: #6d28d9; color: #fff; transform: translateX(2px); }
.bq-uso .bq-ir:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }

/* ── EL PIE DE LOS DATOS DE MUESTRA ─────────────────────────────────────── */
.bq-pie {
  margin: clamp(16px, 1.5vw, 24px) 0 0; text-align: center;
  color: var(--muted); font-size: 12.5px;
}

/* ══ LAS PANTALLAS DE DENTRO ══════════════════════════════════════════════ */
.bq-m { display: flex; flex-direction: column; gap: clamp(9px, 0.84vw, 13.5px); }
.bq-m--atiende { display: grid; grid-template-columns: 37fr 63fr; gap: clamp(7.88px, 0.7vw, 12.38px); align-items: start; }
.bq-m--recupera { display: grid; grid-template-columns: 45fr 51fr; gap: clamp(7.2px, 0.7vw, 12.6px); align-items: start; }
.bq-m--recupera > .bq-hilo, .bq-m--recupera > .bq-b { grid-column: 1 / -1; }
.bq-m--recupera > .bq-b { width: 88%; margin-left: auto; }
/* LA FLECHA QUE VA DE UNA COLUMNA A LA SIGUIENTE. Colocada suelta sobre el
   hueco de la rejilla —38 px— para que no empuje nada hacia abajo: el bloque
   tiene 21 px de margen sobre lo que cabe en la pantalla del dueño y no se
   pueden gastar en un adorno. La última tarjeta no la lleva: una flecha que
   sale del final no lleva a ninguna parte. */
.bq-card { position: relative; }
.bq-paso {
  position: absolute; top: clamp(30px, 2.8vw, 48px); left: 100%;
  width: clamp(24px, 2.3vw, 38px); color: #7c3aed; z-index: 2;
  margin-left: calc(clamp(14px, 2.03vw, 34px) / 2 - clamp(12px, 1.15vw, 19px));
}
.bq-paso svg { width: 100%; height: auto; display: block; }
.bq-tres > .bq-card:last-child .bq-paso { display: none; }

/* CONVIERTE, EN DOS COLUMNAS COMO EL DIBUJO NUEVO.
   Bajaba en escalera —pregunta arriba a la izquierda, ficha y confirmación
   desplazadas a la derecha— y así no cabía la rejilla de horas, que es
   justamente la pieza que enseña que aquí se RESERVA y no sólo se responde.
   En la maqueta 55 la ficha del producto y las horas van LADO A LADO, y es de
   ahí de donde sale el alto. La pregunta y la confirmación siguen cruzando de
   lado a lado, que es lo que conserva la escalera. */
.bq-m--convierte {
  display: grid; grid-template-columns: 54fr 46fr;
  gap: clamp(7px, 0.66vw, 11px) clamp(7px, 0.7vw, 12px); align-items: start;
}
.bq-m--convierte > .bq-b--izq { grid-column: 1 / -1; width: 60%; }
.bq-m--convierte > .bq-hilo { grid-column: 1 / -1; }
.bq-m--convierte > .bq-ok { grid-column: 1 / -1; width: 74%; margin-left: auto; }
.bq-m--convierte > .bq-prod { width: 100%; }

/* LA REJILLA DE HUECOS. `bq-horas` NO, que ya existe y es de otro bloque —las
   tres pastillas de «Sábado 10:00» de los casos de uso— y me habría cambiado
   el dibujo de allí sin tocarlo. */
.bq-huecos { display: flex; flex-direction: column; gap: clamp(3px, .3vw, 5px); }
.bq-huecos > b { font-size: clamp(11.33px, 0.89vw, 14.57px); font-weight: 800; color: var(--ink); }
.bq-huecos > s { text-decoration: none; color: var(--muted); font-size: clamp(9.71px, 0.73vw, 12.41px); }
.bq-huecos > i { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3px, .3vw, 5px); margin-top: 2px; }
.bq-huecos > i > u {
  display: grid; place-items: center; text-decoration: none;
  padding: clamp(2.5px, .26vw, 4.5px) 0; border-radius: .6em;
  background: #f5f3fd; color: #5b6274; font-size: clamp(9.71px, 0.73vw, 12.41px); font-weight: 600;
}
.bq-huecos > i > u.es-on { background: var(--purple); color: #fff; }

/* CLIENTES RECUPERADOS. La cifra se lee como lo que es porque el pie del
   bloque lo dice: «Pantallas del producto con datos de ejemplo». Los 248 y los
   342 de la caja de al lado son del mismo tipo. */
.bq-recu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 8px; }
.bq-recu > b { grid-column: 1 / -1; font-size: clamp(11.33px, 0.89vw, 14.57px); font-weight: 800; color: var(--ink); }
.bq-recu > em { font-style: normal; font-family: var(--font-display, inherit); font-size: clamp(15px, 1.24vw, 21px); font-weight: 800; color: var(--purple); line-height: 1.1; }
.bq-recu > i { display: flex; align-items: flex-end; gap: 3px; height: 1.9em; }
.bq-recu > i > s { display: block; width: .46em; border-radius: .23em; background: #cdbdfb; text-decoration: none; }
.bq-recu > i > s:last-child { background: var(--purple); }
.bq-col { display: flex; flex-direction: column; gap: clamp(9px, 0.84vw, 14.62px); min-width: 0; }

.bq-card .bq-caja {
  border-radius: clamp(11px, 1vw, 17px); background: #fff;
  box-shadow: 0 1px 2px rgba(22, 24, 29, .05), 0 10px 26px -20px rgba(76, 29, 149, .34);
  padding: clamp(10.12px, 0.9vw, 15.75px);
}

/* La lista de conversaciones */
.bq-lista { display: flex; flex-direction: column; gap: 3px; }
.bq-lista > b {
  font-size: clamp(11.33px, 0.84vw, 14.03px); font-weight: 800; color: var(--ink);
  letter-spacing: -.01em; padding: 2px 4px 6px;
}
.bq-lista > span {
  display: flex; align-items: center; gap: 7px;
  padding: clamp(5px, .44vw, 8px) clamp(5.62px, 0.5vw, 9px);
  border-radius: 9px; color: var(--ink-2);
  font-size: clamp(10.25px, 0.78vw, 12.95px); font-weight: 600;
}
.bq-lista > span.es-on { background: #f3eefd; color: #5b21b6; font-weight: 700; }
.bq-lista > span > u { margin-left: auto; color: var(--muted); font-size: .92em; font-weight: 700; }
.bq-lista > span.es-on > u {
  background: #6d28d9; color: #fff; border-radius: 999px;
  min-width: 1.7em; padding: 1px 5px; text-align: center;
}
.bq-lista .bq-mini {
  display: grid; place-items: center; flex: none;
  width: 1.62em; height: 1.62em; border-radius: 50%;
  background: #f1eefb; color: #6d28d9;
}
.bq-lista .bq-mini > svg { width: 64%; height: 64%; }
.bq-lista .bq-mini .lgm { --k: 62%; }
.bq-lista .bq-mini--wa { background: #25d366; color: #fff; }
.bq-lista .bq-mini--ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7); color: #fff; }
.bq-lista .bq-mini--web { background: #6d28d9; color: #fff; }

/* La ventana de chat */
.bq-chat { display: flex; flex-direction: column; gap: clamp(5.62px, 0.52vw, 9px); }
.bq-chat-h { display: flex; align-items: center; gap: 7px; padding-bottom: clamp(5.62px, 0.52vw, 9px); border-bottom: 1px solid #f0edf8; }
.bq-chat-h > img { width: 2.3em; height: 2.3em; border-radius: 50%; object-fit: cover; flex: none; }
.bq-chat-h > div { min-width: 0; }
.bq-chat-h > div > b { display: block; font-size: clamp(10.79px, 0.82vw, 13.49px); font-weight: 800; color: var(--ink); }
.bq-chat-h > div > s { display: block; font-size: clamp(9.17px, 0.69vw, 11.33px); color: var(--muted); }
.bq-chat-h > svg { width: 13px; height: 13px; margin-left: auto; color: #b6b3c4; flex: none; }

/* Las burbujas */
.bq-card .bq-b {
  display: block; position: relative;
  max-width: 92%; padding: clamp(7px, .62vw, 11px) clamp(9px, 0.81vw, 14.62px);
  border-radius: 13px;
  font-size: clamp(10.25px, 0.8vw, 13.49px); line-height: 1.42; color: var(--ink-2);
}
.bq-card .bq-b > u, .bq-card .bq-b em > u {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  margin-top: 3px; color: var(--muted); font-size: .82em; font-weight: 600;
}
.bq-card .bq-b > u > svg, .bq-card .bq-b em > u > svg { width: 1.1em; height: 1.1em; color: #6d28d9; }
.bq-card .bq-b--in { width: 93%; background: #fff; border: 1px solid #efedf6; align-self: flex-start; }
.bq-card .bq-b--out { width: 93%; background: #ede7fb; color: #3c2a63; align-self: flex-end; margin-left: auto; }
.bq-card .bq-b--verde { background: #eafaf0; border: 1px solid #d7f2e2; color: #24413a; }
.bq-card .bq-b--izq { align-self: flex-start; }
.bq-card .bq-b--cara {
  display: flex; align-items: flex-start; gap: 7px;
  max-width: 100%; padding: 0; background: none; border: 0;
}
.bq-card .bq-b--cara > img { width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover; flex: none; }
.bq-card .bq-b--cara > em {
  flex: 1; min-width: 0;
  padding: clamp(7px, .62vw, 11px) clamp(9px, 0.81vw, 14.62px);
  border-radius: 13px; background: #fff; border: 1px solid #efedf6;
}
.bq-card .bq-b--verde.bq-b--cara > em { background: #eafaf0; border-color: #d7f2e2; color: #24413a; }
.bq-card .bq-b em > b { display: block; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.bq-card .bq-b .bq-wa {
  display: grid; place-items: center; flex: none;
  width: 1.05em; height: 1.05em; border-radius: 50%; background: #25d366; color: #fff;
  margin: 1.25em 0 0 -1.15em; box-shadow: 0 0 0 1.5px #fff;
}
.bq-card .bq-b .bq-wa .lgm { --k: 64%; }
.bq-card .bq-b--cuho { display: flex; align-items: flex-start; gap: 7px; max-width: 100%; padding: 0; background: none; }
.bq-card .bq-b--cuho > em { flex: 1; min-width: 0; }
.bq-card .bq-cuho {
  display: grid; place-items: center; flex: none;
  width: 2em; height: 2em; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px -1px rgba(76, 29, 149, .3);
}
.bq-card .bq-cuho > img { width: 76%; height: 76%; object-fit: contain; }

/* Respuestas rápidas */
.bq-rap { margin-top: 2px; padding: clamp(6.75px, 0.63vw, 11.25px); border-radius: 11px; background: #faf9fe; border: 1px solid #f0edf8; }
.bq-rap > b {
  display: flex; align-items: center; gap: 5px; margin-bottom: 5px;
  font-size: clamp(9.71px, 0.76vw, 12.41px); font-weight: 800; color: #5b21b6;
}
.bq-rap > b > svg { width: 1.16em; height: 1.16em; flex: none; }
.bq-rap .bq-env { display: grid; place-items: center; flex: none; margin-left: auto; width: 1.95em; height: 1.95em; border-radius: 50%; background: #6d28d9; }
.bq-rap .bq-env > svg { width: 52%; height: 52%; }
/* CADA RESPUESTA RÁPIDA LLEVA SU CHEVRON, como en la maqueta: el texto a la
   izquierda y una flechita a la derecha que dice que la fila se puede tocar.
   Estaba centrado y sin flecha, que parece una etiqueta y no un botón. */
.bq-rap > s {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 4px; padding: 5px 7px 5px 9px; border-radius: 999px;
  background: #fff; border: 1px solid #efedf6; text-align: left;
  font-size: clamp(9.17px, 0.71vw, 11.87px); color: var(--ink-2);
}
.bq-rap > s::after {
  content: ''; flex: none; width: .95em; height: .95em;
  background: #b4b1c6;
  -webkit-mask: var(--bq-chev) center / contain no-repeat;
  mask: var(--bq-chev) center / contain no-repeat;
  --bq-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* La ficha de producto */
.bq-prod { display: grid; grid-template-columns: auto 1fr; gap: clamp(9px, 0.81vw, 14.62px); align-items: center; }
.bq-prod > img {
  width: clamp(44px, 4.2vw, 70px); height: clamp(44px, 4.2vw, 70px);
  border-radius: 11px; object-fit: cover; flex: none; background: #f5f3fb;
}
.bq-prod > div { min-width: 0; }
.bq-prod > div > b { display: block; font-size: clamp(11.33px, 0.89vw, 14.57px); font-weight: 800; color: var(--ink); }
.bq-prod .bq-precio { display: block; margin: 2px 0; font-size: clamp(11.33px, 0.89vw, 14.57px); font-weight: 800; color: var(--ink); }
.bq-prod > div > em { display: block; font-size: clamp(9.71px, 0.73vw, 12.41px); color: var(--muted); line-height: 1.36; }
.bq-prod .bq-bot { grid-column: 1 / -1; justify-self: end; }
.bq-prod--ancho { grid-template-columns: auto 1fr; }

/* Botones de pega */
.bq-card .bq-bot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 2px; padding: clamp(6.75px, 0.63vw, 11.25px) 12px; border-radius: 999px;
  background: #ede7fb; color: #5b21b6;
  font-size: clamp(10.25px, 0.78vw, 12.95px); font-weight: 700;
}
.bq-card .bq-bot > svg { width: 1.16em; height: 1.16em; flex: none; }
.bq-card .bq-bot--ancho { width: 100%; }
.bq-card .bq-bot--lleno { width: 100%; background: #6d28d9; color: #fff; }

/* La confirmación verde */
.bq-card .bq-ok {
  display: flex; align-items: center; gap: clamp(7.88px, 0.7vw, 12.38px);
  padding: clamp(9px, 0.81vw, 14.62px); border-radius: clamp(11px, 1vw, 16px);
  background: #eafaf0; border: 1px solid #d7f2e2;
}
.bq-card .bq-ok > i { display: grid; place-items: center; flex: none; width: 1.95em; height: 1.95em; border-radius: 50%; background: #22c55e; font-size: clamp(10.25px, 0.8vw, 13.49px); }
.bq-card .bq-ok > i > svg { width: 60%; height: 60%; }
.bq-card .bq-ok > div { min-width: 0; }
.bq-card .bq-ok > div > b { display: block; font-size: clamp(10.79px, 0.84vw, 14.03px); font-weight: 800; color: #14532d; }
.bq-card .bq-ok > div > s { display: block; font-size: clamp(9.71px, 0.73vw, 12.41px); color: #3f6b52; }
.bq-card .bq-ok > u { margin-left: auto; align-self: flex-end; color: #6b8c7a; font-size: clamp(8.63px, 0.67vw, 11.33px); font-weight: 600; }

/* Segmentos */
.bq-seg { display: flex; flex-direction: column; gap: 2px; }
.bq-seg > b { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px; font-size: clamp(10.79px, 0.82vw, 13.49px); font-weight: 800; color: var(--ink); }
.bq-seg > b > svg { width: 1.24em; height: 1.24em; color: #6d28d9; flex: none; }
.bq-seg > span {
  display: flex; align-items: center; gap: 8px; padding: clamp(5.62px, 0.5vw, 9px) 7px;
  border-radius: 8px; color: var(--ink-2); font-size: clamp(9px, 0.68vw, 11.4px); font-weight: 600;
}
.bq-seg > span > u { margin-left: auto; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bq-seg > span.es-on { background: #f3eefd; color: #5b21b6; }
.bq-seg > span.es-on > u { color: #5b21b6; }

/* El aviso con interruptor */
.bq-avisa { position: relative; }
.bq-avisa > b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: clamp(10.25px, 0.8vw, 12.95px); font-weight: 800; color: var(--ink); }
.bq-avisa > b > svg { width: 1.24em; height: 1.24em; color: #6d28d9; flex: none; }
.bq-avisa > s { display: block; font-size: clamp(9.17px, 0.71vw, 11.87px); color: var(--muted); line-height: 1.38; padding-right: 2.6em; }
.bq-card .bq-sw {
  display: block; width: 2.35em; height: 1.32em; border-radius: 999px; background: #ddd9e8;
  position: relative; flex: none; font-size: clamp(9.71px, 0.76vw, 12.41px);
}
.bq-card .bq-sw::after {
  content: ''; position: absolute; top: .16em; left: .16em;
  width: 1em; height: 1em; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.bq-card .bq-sw.es-on { background: #6d28d9; }
.bq-card .bq-sw.es-on::after { left: auto; right: .16em; }
.bq-avisa .bq-sw { position: absolute; right: clamp(9px, .8vw, 14px); bottom: clamp(9px, .8vw, 14px); }

/* Los hilos de puntos que unen las piezas */
.bq-card .bq-hilo { display: block; height: clamp(10px, .9vw, 16px); position: relative; }
.bq-card .bq-hilo::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1.5px dashed #cdbdf0;
}
.bq-hilo--1::before { left: 18%; }
.bq-hilo--2::before { left: 46%; }
.bq-hilo--3::before { left: 28%; }

/* El panel lavanda del bloque 2 */
.bq-card .bq-lav {
  padding: clamp(9px, 0.81vw, 14.62px); border-radius: clamp(11px, 1vw, 17px);
  background: #ece7fb; display: flex; flex-direction: column; gap: clamp(6.75px, 0.61vw, 10.12px);
}
.bq-card .bq-lav .bq-b--cuho > em { font-size: clamp(10.25px, 0.8vw, 13.49px); line-height: 1.42; color: var(--ink-2); }
.bq-card .bq-lav .bq-caja { box-shadow: 0 1px 3px rgba(76, 29, 149, .1); }
.bq-card .bq-hora { display: block; text-align: right; color: #8b86a0; font-size: clamp(8.63px, 0.67vw, 11.33px); font-weight: 600; }
/* LOS TRES HORARIOS, EN FILA Y NO APILADOS. La maqueta los pone uno al lado
   del otro y aquí caían en tres renglones a todo el ancho: son ~60 px de alto
   por nada, en un bloque que va justo. En fila caben —tres píldoras de
   «Sábado 10:00» piden 3×82+2×5 = 256 en una columna de 268 medidos— y de paso
   se leen como opciones para elegir, que es lo que son, en vez de como una
   lista. Se envuelven si algún día no caben. */
.bq-card .bq-horas { display: flex; flex-wrap: wrap; gap: 5px; }
.bq-card .bq-horas > s {
  flex: 1 1 auto; min-width: 0;
  padding: clamp(5.62px, 0.52vw, 9px) 4px; border-radius: 8px; background: #fff; text-align: center;
  font-size: clamp(9.71px, 0.76vw, 12.41px); font-weight: 700; color: #5b21b6;
  white-space: nowrap;
}
.bq-card .bq-espera {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  align-self: center; padding: clamp(5.62px, 0.52vw, 9px) 12px; border-radius: 999px;
  background: #fff; border: 1px solid #efedf6;
  font-size: clamp(9.17px, 0.71vw, 11.87px); font-weight: 600; color: var(--muted);
}
.bq-card .bq-espera > svg { width: 1.24em; height: 1.24em; color: #6d28d9; flex: none; }
.bq-card .bq-estrellas { display: flex; justify-content: center; gap: 4px; padding: clamp(6.75px, 0.61vw, 11.25px); border-radius: 10px; background: #fff7e6; }
.bq-card .bq-estrellas > s {
  width: 1.15em; height: 1.15em; font-size: clamp(9.71px, 0.8vw, 13.49px); background: #f5b301;
  -webkit-mask: var(--estrella) center / contain no-repeat; mask: var(--estrella) center / contain no-repeat;
  --estrella: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 2.6 2.9 5.9 6.5 1-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.5l6.5-1z'/></svg>");
}

/* ── LA TIRA DE CUATRO (hoy, la de gestión) ──────────────────────────────────────────────────── */
.bq-tira {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center; list-style: none;
  margin: clamp(16px, 1.9vw, 30px) 0 0; padding: clamp(14px, 1.3vw, 22px) clamp(10px, 1vw, 18px);
  border-radius: clamp(16px, 1.4vw, 24px);
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(3px);
  box-shadow: 0 1px 2px rgba(76, 29, 149, .05), 0 18px 40px -32px rgba(76, 29, 149, .3);
}
.bq-tira > li {
  display: grid; grid-template-columns: auto 1fr; column-gap: clamp(8px, .8vw, 14px);
  align-items: center; padding: 0 clamp(8px, 1vw, 20px);
  border-left: 1px solid #ece8f6;
}
.bq-tira > li:first-child { border-left: 0; }
.bq-tira > li > i {
  grid-row: 1 / 3; display: grid; place-items: center; flex: none;
  width: clamp(22px, 1.85vw, 30px); height: clamp(22px, 1.85vw, 30px);
  border-radius: 50%; background: #6d28d9;
}
.bq-tira > li > i > svg { width: 58%; height: 58%; }
.bq-tira > li > b { font-size: clamp(12px, .98vw, 16px); font-weight: 800; color: var(--ink); letter-spacing: -.012em; }
.bq-tira > li > span { font-size: clamp(10.5px, .82vw, 13.5px); color: var(--muted); line-height: 1.34; }

/* ══ 4 · GESTIÓN CUHO ═════════════════════════════════════════════════════ */
.bq-escena { position: relative; padding: 0 clamp(0px, 13.2vw, 232px); }
.bq-panel {
  display: grid; grid-template-columns: clamp(120px, 11.5vw, 196px) 1fr;
  gap: clamp(10px, 1vw, 18px); padding: clamp(10px, 1vw, 18px);
  border-radius: clamp(18px, 1.6vw, 28px);
  background: #eee9fb;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 34px 70px -46px rgba(76, 29, 149, .5);
}
.bq-riel { display: flex; flex-direction: column; gap: 3px; padding: clamp(8px, .8vw, 14px) clamp(6px, .6vw, 10px); }
.bq-riel > b { display: flex; align-items: center; gap: 8px; padding: 0 8px clamp(10px, 1vw, 18px); font-size: clamp(13px, 1.04vw, 18px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.bq-riel > b > img { width: 1.35em; height: 1.35em; object-fit: contain; flex: none; }
.bq-riel > span {
  display: flex; align-items: center; gap: 9px; padding: clamp(7px, .62vw, 11px) 10px;
  border-radius: 10px; color: var(--ink-2); font-size: clamp(10.5px, .82vw, 13.5px); font-weight: 600;
}
.bq-riel > span > svg { width: 1.3em; height: 1.3em; color: #8b86a0; flex: none; }
.bq-riel > span.es-on { background: #fff; color: #5b21b6; font-weight: 700; box-shadow: 0 1px 3px rgba(76, 29, 149, .12); }
.bq-riel > span.es-on > svg { color: #6d28d9; }

.bq-ajustes { padding: clamp(12px, 1.1vw, 20px); border-radius: clamp(14px, 1.2vw, 20px); background: #fdfcff; min-width: 0; }
.bq-aj {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: clamp(9px, .85vw, 15px); border-radius: clamp(10px, .9vw, 15px);
  background: #fff; border: 1px solid #f0edf8;
}
.bq-aj > b { display: flex; align-items: center; gap: 8px; font-size: clamp(10px, .8vw, 13.5px); font-weight: 800; color: var(--ink); }
.bq-aj > b > .bq-sw { margin-left: auto; }
.bq-aj > s { display: block; font-size: clamp(9px, .72vw, 12px); color: var(--muted); line-height: 1.4; }
.bq-aj .bq-ops { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.bq-aj .bq-ops > u {
  padding: 4px 11px; border-radius: 999px; background: #f6f4fc; color: var(--ink-2);
  font-size: clamp(9px, .72vw, 12px); font-weight: 700;
}
.bq-aj .bq-ops > u.es-on { background: #6d28d9; color: #fff; }
.bq-aj .bq-checks, .bq-aj .bq-lineas { display: flex; flex-direction: column; gap: 7px; }
.bq-aj .bq-checks > u { display: flex; align-items: center; gap: 8px; font-size: clamp(9px, .72vw, 12px); font-weight: 600; color: var(--ink-2); }
.bq-aj .bq-checks > u > svg { width: 1.34em; height: 1.34em; padding: .26em; border-radius: 50%; background: #6d28d9; flex: none; }
.bq-aj .bq-lineas > u { display: flex; align-items: center; gap: 8px; font-size: clamp(9px, .72vw, 12px); font-weight: 600; color: var(--ink-2); }
.bq-aj .bq-lineas > u > svg { width: 1.34em; height: 1.34em; color: #6d28d9; flex: none; }
.bq-aj .bq-lineas > u > .bq-sw { margin-left: auto; }
.bq-aj .bq-sw {
  display: block; width: 2.35em; height: 1.32em; border-radius: 999px; background: #ddd9e8;
  position: relative; flex: none; font-size: clamp(9px, .72vw, 12px);
}
.bq-aj .bq-sw::after {
  content: ''; position: absolute; top: .16em; left: .16em;
  width: 1em; height: 1em; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.bq-aj .bq-sw.es-on { background: #6d28d9; }
.bq-aj .bq-sw.es-on::after { left: auto; right: .16em; }

/* Las tres tarjetas que flotan alrededor del panel */
.bq-escena .bq-flota {
  position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 8px;
  width: clamp(168px, 15.1vw, 252px); padding: clamp(9px, .8vw, 14px);
  border-radius: clamp(12px, 1.1vw, 18px); background: #fff;
  box-shadow: 0 2px 6px rgba(76, 29, 149, .07), 0 26px 50px -30px rgba(76, 29, 149, .5);
  font-size: clamp(9.5px, .74vw, 12.5px); line-height: 1.4; color: var(--ink-2);
}
.bq-escena .bq-flota > img { width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover; flex: none; }
.bq-escena .bq-flota > em { min-width: 0; flex: 1; }
.bq-escena .bq-flota em > b { display: block; font-weight: 800; color: var(--ink); }
.bq-escena .bq-flota em > u { display: block; margin-top: 3px; text-align: right; font-size: .82em; font-weight: 600; color: #8b86a0; }
.bq-escena .bq-flota .bq-wa {
  display: grid; place-items: center; flex: none; width: 1.05em; height: 1.05em;
  border-radius: 50%; background: #25d366; color: #fff;
  margin: 1.3em 0 0 -1.2em; box-shadow: 0 0 0 1.5px #fff;
}
.bq-escena .bq-flota .bq-wa .lgm { --k: 64%; }

/* ══ 5 · PREGUNTAS FRECUENTES ═════════════════════════════════════════════ */
.bq-dos--faq { gap: clamp(10px, 1.1vw, 18px); align-items: start; }
.bq-q {
  position: relative;
  padding: clamp(14px, 1.2vw, 21px) clamp(14px, 1.4vw, 26px);
  padding-left: calc(clamp(14px, 1.4vw, 26px) + clamp(38px, 3.4vw, 56px) + clamp(10px, 1vw, 17px));
  border-radius: clamp(14px, 1.3vw, 22px); background: #fff;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .04), 0 18px 40px -32px rgba(76, 29, 149, .34);
}
.bq-q .bq-ic {
  position: absolute; left: clamp(14px, 1.4vw, 26px); top: 50%; transform: translateY(-50%);
  width: clamp(38px, 3.4vw, 56px); height: clamp(38px, 3.4vw, 56px);
  border-radius: clamp(11px, 1vw, 17px);
}
.bq-q > summary {
  display: flex; align-items: center; gap: clamp(10px, 1vw, 17px);
  list-style: none; cursor: pointer;
}
.bq-q > summary::-webkit-details-marker { display: none; }
.bq-q > summary > b {
  flex: 1; min-width: 0; padding-top: 2px;
  font-family: var(--font-display, inherit);
  font-size: clamp(14px, 1.17vw, 20px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.24;
}
.bq-q .bq-q-x {
  display: grid; place-items: center; flex: none; align-self: center;
  width: 1.5em; height: 1.5em; font-size: clamp(13px, 1.1vw, 18px); color: #8b86a0;
  transition: transform .2s ease;
}
.bq-q .bq-q-x > svg { width: 100%; height: 100%; }
.bq-q[open] .bq-q-x { transform: rotate(180deg); }
.bq-q > p {
  margin: clamp(7px, .7vw, 12px) 0 0;
  color: var(--muted); font-size: clamp(12px, .93vw, 15.5px); line-height: 1.5;
}
.bq-q > p > a { color: #6d28d9; font-weight: 700; }

/* ── EL CIERRE ──────────────────────────────────────────────────────────── */
.bq-sec .bq-cierre {
  position: relative; margin-top: 0;
  padding: clamp(24px, 2.5vw, 43px) clamp(20px, 3vw, 54px);
  border-radius: clamp(20px, 1.9vw, 34px); text-align: center;
  background: linear-gradient(180deg, #f0ecfd 0%, #e6dffb 100%);
}
.bq-sec .bq-h2--cierre {
  font-family: var(--font-display, inherit);
  font-size: clamp(25px, 2.9vw, 42px); font-weight: 800; line-height: 1.1;
  letter-spacing: -.032em; color: var(--ink); margin: 0 0 12px; text-wrap: balance;
}
.bq-sec .bq-cierre .bq-sub { max-width: 1020px; }
.bq-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1vw, 18px); margin: clamp(15px, 1.5vw, 26px) 0 clamp(12px, 1.2vw, 20px); }
.bq-btns .bq-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(11px, 1vw, 16px) clamp(20px, 1.9vw, 34px); border-radius: 999px;
  font-size: clamp(13.5px, 1.05vw, 17px); font-weight: 700; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bq-btns .bq-btn--negro { background: #16181d; color: #fff; box-shadow: 0 14px 30px -18px rgba(22, 24, 29, .8); }
.bq-btns .bq-btn--blanco { background: #fff; color: var(--ink); box-shadow: 0 10px 26px -18px rgba(76, 29, 149, .6); }
.bq-btns .bq-btn--blanco > i { display: grid; place-items: center; width: 1.65em; height: 1.65em; border-radius: 50%; background: #6d28d9; flex: none; }
.bq-btns .bq-btn--blanco > i > svg { width: 58%; height: 58%; }
.bq-btns .bq-btn:hover { transform: translateY(-2px); }
.bq-btns .bq-btn:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }
.bq-checks-cierre {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.6vw, 30px);
  list-style: none; margin: 0; padding: 0;
}
.bq-checks-cierre > li { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: clamp(12px, .95vw, 15px); font-weight: 600; }
.bq-checks-cierre > li > svg { width: 1.24em; height: 1.24em; color: #6d28d9; flex: none; }

/* ── PANTALLAS ESTRECHAS ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .bq-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bq-escena { padding: 0; }
  .bq-escena .bq-flota { position: static; width: auto; }
  .bq-escena { display: grid; gap: clamp(10px, 1.1vw, 16px); }
  .bq-escena .bq-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .bq-nota { display: none; }
  .bq-tres, .bq-dos, .bq-dos--faq { grid-template-columns: minmax(0, 1fr); }
  .bq-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .bq-tira > li:nth-child(odd) { border-left: 0; }
  .bq-panel { grid-template-columns: minmax(0, 1fr); }
  .bq-riel { flex-direction: row; overflow-x: auto; }
  .bq-riel > b { display: none; }
  .bq-riel > span { flex: none; }
}
@media (max-width: 620px) {
  .bq-m--atiende { grid-template-columns: minmax(0, 1fr); }
  .bq-tira { grid-template-columns: minmax(0, 1fr); }
  .bq-tira > li { border-left: 0; }
  .bq-card .bq-hilo { display: none; }
}

/* ── PREGUNTAS FRECUENTES: BUSCADOR, CATEGORÍAS Y CIERRE ──────────────────
   El bloque de la portada gana el buscador y las seis categorías de la
   maqueta. Se apoya en el mismo aspecto que el buscador del centro de ayuda
   (.hy-busca): dos aspectos para la misma pregunta es lo que hace que una web
   parezca dos. */
.bq-faq-busca {
  display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 16px;
  max-width: 620px; margin: 0 auto 16px;
  border-radius: 999px; background: #fff; border: 1px solid #e9e3ff;
  box-shadow: 0 20px 44px -30px rgba(35, 20, 80, .45);
}
.bq-faq-busca > svg { width: 18px; height: 18px; color: #a09dba; flex: none; }
.bq-faq-busca input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.bq-faq-busca input::placeholder { color: #a09dba; }
.bq-faq-busca input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }
.bq-faq-busca-b {
  flex: none; padding: 11px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: #6d28d9; color: #fff; font: inherit; font-size: 14px; font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.bq-faq-busca-b:hover { background: #5b21b6; transform: translateY(-1px); }

.bq-faq-cats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 auto 22px; max-width: 900px;
}
.bq-faq-cat {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid #ece7f8;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #5b6274;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bq-faq-cat:hover { border-color: #c9b8f5; color: #6d28d9; }
.bq-faq-cat.es-on { background: #6d28d9; border-color: #6d28d9; color: #fff; }

/* Una pregunta que el filtro deja fuera. El atributo hidden a secas no basta:
   details trae su propio display de bloque y lo pisaría. */
.bq-q[hidden] { display: none; }

.bq-faq-cero {
  margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--muted);
}
.bq-faq-cero a { color: #6d28d9; font-weight: 700; }

@media (max-width: 620px) {
  .bq-faq-busca { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
  .bq-faq-busca input { width: 100%; flex: 1 1 100%; }
  .bq-faq-busca-b { width: 100%; }
}

/* ══ 2 · CASOS DE USO, EN DOS PANTALLAS ═══════════════════════════════════
   La maqueta del 2026-10-02 (casos-1 y casos-2) pone las cuatro tarjetas en
   DOS pantallas de dos, una al lado de la otra, y debajo los puntos, el
   contador «01 / 02» y dos flechas redondas. Medido en la maqueta, no mirado:
   cada tarjeta es el 0,45–0,51 del ancho y el 0,62 del alto de la pantalla,
   el hueco entre las dos el 0,011, y los mandos van centrados en la franja
   de abajo (y = 0,94).

   ES UN DESPLAZAMIENTO CON ENGANCHE, NO UN `transform`. Con `scroll-snap`
   la segunda pantalla existe aunque el guion no cargue: se llega con el
   dedo, con la rueda en horizontal y con el tabulador —el navegador desplaza
   lo que recibe el foco, y ahí están dos de las cuatro flechas-enlace que la
   ley exige—. El guion sólo añade los botones y el contador. */

/* EL ZOOM, EL JUSTO PARA LOS 501 PX DEL DUEÑO. La cabecera va sin él, como
   en el resto de bloques; se encoge sólo lo de dentro. Medido a 1.280: con
   .78 el bloque medía 507; con .76 cabe. La letra más chica queda en 6,4 px
   en pantalla, por encima de los 5,93 del bloque que el dueño ya aceptó. */
#bq-casos .bq-car { position: relative; zoom: .76; }

/* LA PISTA. La sombra de las tarjetas cae 28 px por debajo y 10 por los
   lados, y una pista con `overflow` los recorta: se le da ese sitio con
   relleno y se devuelve con margen negativo, para que el bloque mida lo mismo.
   `scroll-padding` hace que el enganche cuente desde el borde del relleno y
   no desde el de la pista, que es donde empieza de verdad cada pantalla. */
#bq-casos .bq-car-pista {
  display: flex; gap: clamp(14px, 2.03vw, 34px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 12px 30px; margin: 0 -12px -22px;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
}
#bq-casos .bq-car-pista::-webkit-scrollbar { display: none; }
#bq-casos .bq-car-pista:focus-visible { outline: 2px solid #6d28d9; outline-offset: -2px; border-radius: 14px; }
/* El hueco entre las dos tarjetas es el 0,011 del ancho en la maqueta; el de
   las rejillas de la casa (2,03vw) daba 0,016. */
#bq-casos .bq-car-pant {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px);
}
/* LA ESCENA DE CADA TARJETA: el chat a la izquierda y el dibujo a la derecha,
   con el chat PISANDO un poco el dibujo, como en la maqueta. Medido en la
   tarjeta 1 de casos-1 contando píxeles: el texto del chat acaba a 0,473 del
   ancho de la tarjeta; dónde empieza el dibujo no lo separa el color (la
   cara de la tableta es casi la de la tarjeta), a ojo ronda 0,52. Aquí la
   columna del chat acaba a 0,58 y el dibujo empieza a 0,54: el chat va algo
   más ancho que en la maqueta porque la columna tiene que caber tres
   píldoras de hora en fila. El dibujo se apoya en el suelo de la escena; el
   chat cuelga de arriba. Va con las dos clases para ganarle a
   `#bq-casos .bq-m`, que le pone hueco. */
#bq-casos .bq-m.bq-m--esc {
  display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  align-items: start; gap: 0;
  /* La escena se queda con todo lo que sobra de la tarjeta: las dos tarjetas
     de una pantalla miden lo mismo y la que tiene la cabecera más corta
     dejaba el dibujo flotando a 24 px del borde. El objeto del dibujo está
     apoyado en el filo de abajo de su imagen, así que la imagen tiene que
     tocar el relleno de la tarjeta para que parezca que se apoya en ella. */
  flex: 1 1 auto;
}
#bq-casos .bq-m--esc > .bq-col { position: relative; z-index: 2; margin-right: -7%; }
#bq-casos .bq-esc-img { display: block; align-self: end; min-width: 0; }
#bq-casos .bq-esc-img > img { display: block; width: 100%; height: auto; }

/* LA NOTA A MANO DE LAS TARJETAS 3 Y 4. En casos-2 (contando píxeles de
   tinta violeta) la letra va del 0,75 al 1,0 del ancho de la tarjeta, justo
   DEBAJO del botón al que señala, con la flecha subiendo hacia él: allí el
   chat está a la derecha y el dibujo a la izquierda. Aquí el chat va a la
   izquierda en las cuatro tarjetas (apartado 7), así que la esquina de abajo
   a la derecha es el dibujo: medido en el alfa de los dos .webp, una nota
   ahí cae el 95 % (tarjeta 3) y el 79 % (tarjeta 4) sobre objeto, y en la
   tarjeta 3 sobre el gráfico y el cabecero violeta del calendario (un 35 %
   de píxeles saturados bajo tinta violeta). Se queda, pues, donde la pone la maqueta RESPECTO AL
   BOTÓN: al pie de la columna del chat, pegada a su derecha, con la flecha
   subiendo por su izquierda hacia el botón. En el flujo, que así nunca se
   monta sobre el chat ni sobre el dibujo. Girada como las demás notas de la
   casa (.bq-nota--der). */
#bq-casos .bq-esc-nota {
  position: relative; display: block; align-self: flex-end; z-index: 3;
  margin: 2px 2px 0 0; padding: 0;
  font-family: var(--font-mano, 'Caveat', cursive); font-weight: 600;
  font-size: clamp(15px, 1.3vw, 21px); line-height: 1.1; color: var(--violet);
  transform: rotate(-4deg);
}
#bq-casos .bq-esc-nota .bq-curva { right: 100%; bottom: 10%; margin-right: 2px; width: 36px; height: 42px; }

/* LOS MANDOS: puntos, contador y las dos flechas, centrados como en la
   maqueta. El punto se pinta con `::before` para que el botón tenga 22 px de
   superficie y el punto siga midiendo 10: un círculo de 10 no se acierta
   con el dedo. UN PUNTO POR PANTALLA: la maqueta pinta tres para dos y es
   un error suyo. */
#bq-casos .bq-car-ctrl {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, .9vw, 14px);
  margin-top: 4px;
}
#bq-casos .bq-car-puntos { display: flex; align-items: center; gap: 2px; margin-right: clamp(4px, .6vw, 10px); }
#bq-casos .bq-car-punto {
  display: grid; place-items: center; width: 22px; height: 22px;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
}
#bq-casos .bq-car-punto::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: #d9d0f3;
  transition: background .18s ease, transform .18s ease;
}
#bq-casos .bq-car-punto.es-on::before { background: #6d28d9; transform: scale(1.2); }
#bq-casos .bq-car-punto:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; }
#bq-casos .bq-car-n {
  margin-right: clamp(12px, 1.5vw, 24px);
  font-size: clamp(12px, 1vw, 15px); font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#bq-casos .bq-car-n > b { color: var(--ink); font-weight: 800; }
/* El botón redondo mide 0,0275 del ancho en la maqueta: 44 px aquí dentro
   son 33 en pantalla con el zoom, 0,026 de los 1.280 del dueño. */
#bq-casos .bq-car-b {
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 10px -4px rgba(76, 29, 149, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
#bq-casos .bq-car-b > svg { width: 44%; height: 44%; }
#bq-casos .bq-car-b--ant { background: #fff; color: #6d28d9; }
/* La de «siguiente» va rellena de violeta: es la que invita a seguir. */
#bq-casos .bq-car-b--sig { background: #6d28d9; color: #fff; }
#bq-casos .bq-car-b:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(76, 29, 149, .45); }
#bq-casos .bq-car-b:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }

/* A QUIEN PIDE MENOS MOVIMIENTO: el cambio de pantalla es de golpe, los
   puntos y los botones no se deslizan al cambiar, y el punto activo no se
   agranda. Va DETRÁS de las reglas que anula: con la misma especificidad
   manda la última. */
@media (prefers-reduced-motion: reduce) {
  #bq-casos .bq-car-pista { scroll-behavior: auto; }
  #bq-casos .bq-car-punto::before, #bq-casos .bq-car-b { transition: none; }
  #bq-casos .bq-car-punto.es-on::before { transform: none; }
}

/* EN ESTRECHO NO HAY CARRUSEL: las cuatro tarjetas apiladas, sin zoom, y
   los mandos fuera. Por debajo de 620 el chat y el dibujo también se apilan,
   que a 390 una tarjeta mide 350 y dos columnas de 175 no se leen. */
@media (max-width: 900px) {
  #bq-casos .bq-car { zoom: 1; }
  #bq-casos .bq-car-pista {
    display: grid; gap: 14px; overflow: visible; scroll-snap-type: none;
    padding: 0; margin: 0;
  }
  #bq-casos .bq-car-pant { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #bq-casos .bq-car-ctrl { display: none; }
  /* Las notas a mano se van en estrecho, como las demás de la casa. */
  #bq-casos .bq-esc-nota { display: none; }
}
@media (max-width: 620px) {
  #bq-casos .bq-m.bq-m--esc { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  #bq-casos .bq-m--esc > .bq-col { margin-right: 0; }
  #bq-casos .bq-esc-img { width: 58%; justify-self: center; }
}

/* ══ 3 · PLANTILLAS, ACORDEÓN Y VISTA PREVIA ══════════════════════════════
   (El rótulo no se llama «3 · PLANTILLAS» a secas porque la hoja de hoy ya
   tiene uno así para el bloque de seis tarjetas, y la ley 8 no admite dos
   rótulos iguales; si el coordinador retira aquel bloque entero, puede
   acortar éste.)
   Un acordeón a la izquierda y UNA vista previa a la derecha, como en las
   cinco maquetas. Antes eran seis tarjetas en dos pantallas (883 px); ahora
   es una pantalla sola: sólo se ve la categoría abierta, así que el alto no
   depende de cuántas haya.

   El acordeón es `details` con `name` compartido: el navegador cierra las
   demás al abrir una y no hace falta guion para eso. El guion sólo iguala la
   vista previa y los puntos con la categoría abierta.

   MEDIDO EN LAS MAQUETAS (1672×941, `_mide-cajas.py`): la columna del
   acordeón ocupa 0,333 del ancho y la vista previa 0,608; las dos arrancan a
   la misma altura (0,281) y llegan al pie. Dentro de la vista previa, la
   tarjeta de arriba a la izquierda empieza en 0,18 de su ancho —el hueco de
   la izquierda es para la nota a mano— y la de la derecha empieza más abajo,
   en 0,19 de su alto, porque encima lleva la otra nota. */

/* EL ALTO, RECORTADO COMO EN «CASOS»: aire, no letra. El relleno de abajo de
   la sección (56 px a 1.280) se come un décimo de la pantalla del dueño. */
#bq-plantillas { padding-top: 6px; padding-bottom: 8px; }

/* ── LAS DOS COLUMNAS ──────────────────────────────────────────────────────
   35 / 64 partes, que son las de la maqueta. EL ZOOM ES EL JUSTO PARA CABER
   en los 501 px útiles de la ventana del dueño, igual que el de los otros
   bloques; se mide, no se supone: la maqueta llevada a 1.280 de ancho mide
   655 px de alto, y la ventana da 501. */
.bq-pl-dos {
  display: grid; grid-template-columns: 35fr 64fr; gap: 16px;
  align-items: stretch; zoom: .69;
}

/* ── EL ACORDEÓN ───────────────────────────────────────────────────────────
   Es la columna que manda el alto del bloque (la vista previa se estira a su
   medida), así que cada píxel de aire aquí es un píxel de zoom que se pierde
   en toda la sección. Por eso va más prieto que la maqueta. */
.bq-pl-menu {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 8px; border-radius: 24px;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(76, 29, 149, .04), 0 24px 50px -40px rgba(76, 29, 149, .4);
}
.bq-pl {
  border-radius: 15px; background: #fff; border: 1px solid #efedf6;
  transition: background .18s ease, border-color .18s ease;
}
/* La abierta se distingue por el fondo y por una raya violeta a la
   izquierda, como en la maqueta. La raya va en sombra interior para que no
   empuje el contenido un píxel al abrirse. */
.bq-pl[open] {
  background: #f7f4fe; border-color: #e3dbfa;
  box-shadow: inset 3px 0 0 #6d28d9;
}
.bq-pl > summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  padding: 8px 12px 8px 10px; list-style: none; cursor: pointer; border-radius: 15px;
}
.bq-pl > summary::-webkit-details-marker { display: none; }
.bq-pl > summary:focus-visible { outline: 2px solid #6d28d9; outline-offset: -2px; }
/* La baldosa del icono, con el padre delante por lo mismo que las otras:
   sola pierde contra cualquier `.lo-que-sea span` de la hoja. */
.bq-pl .bq-ic {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: #f3eefd; color: #6d28d9;
}
.bq-pl .bq-ic > svg { width: 52%; height: 52%; }
.bq-pl .bq-ic .lgm { --k: 54%; }
.bq-pl-t { min-width: 0; }
.bq-pl-t > b {
  display: block; font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
}
/* La descripcion va en un `span` y no en `s`: esto es un control de verdad,
   no un dibujo, y `s` es «texto tachado» para quien lo oye. */
.bq-pl-t > .bq-pl-d { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.32; color: var(--muted); }
.bq-pl-x {
  display: grid; place-items: center; width: 1.5em; height: 1.5em; font-size: 15px;
  color: #8b86a0; transition: transform .2s ease, color .2s ease;
}
.bq-pl-x > svg { width: 100%; height: 100%; }
.bq-pl[open] .bq-pl-x { transform: rotate(180deg); color: #6d28d9; }

/* Las tres filas de dentro: lavanda, con su chevron. La primera va en violeta
   porque es la que enseña la pieza grande de la vista previa. */
.bq-pl-lista {
  display: flex; flex-direction: column; gap: 5px;
  list-style: none; margin: 0; padding: 0 10px 10px;
}
.bq-pl-lista > li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 11px; border-radius: 10px; background: #ece7fb;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.bq-pl-lista > li:first-child { color: #5b21b6; }
.bq-pl-lista > li::after {
  content: ''; flex: none; width: .9em; height: .9em; background: #a89fcb;
  -webkit-mask: var(--bq-chev) center / contain no-repeat;
  mask: var(--bq-chev) center / contain no-repeat;
  --bq-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ── LA VISTA PREVIA ─────────────────────────────────────────────────────── */
.bq-pl-vistas {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 28px 20px 12px; border-radius: 24px;
  background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 2px rgba(76, 29, 149, .04), 0 30px 60px -44px rgba(76, 29, 149, .45);
}
/* LAS SEIS PANTALLAS VAN APILADAS EN LA MISMA CELDA. Así el lienzo mide lo
   que la más alta y no da un salto al cambiar de categoría; y como la de
   al lado tiene su alto propio, la fila de la rejilla no baila. */
.bq-pl-lienzo { display: grid; flex: 1; align-items: start; }
/* CUATRO COLUMNAS, Y NO DOS, POR LAS NOTAS A MANO. En la maqueta la tarjeta
   de arriba a la izquierda no arranca en el borde: deja 0,15 del ancho para
   «Explora todas las plantillas», y la de la derecha deja 0,08 por el otro
   lado. Las de abajo sí van de lado a lado. Con dos columnas la nota caía
   encima del remite del correo. */
.bq-pl-lienzo .bq-pl-vista {
  grid-area: 1 / 1; position: relative; min-width: 0;
  display: grid; grid-template-columns: 15fr 41fr 36fr 8fr; gap: 12px 14px; align-items: start;
  opacity: 0; visibility: hidden; transition: opacity .35s ease;
}
.bq-pl-lienzo .bq-pl-vista.is-on { opacity: 1; visibility: visible; }
/* Dónde cae cada pieza: arriba-izquierda, arriba-derecha, abajo-izquierda,
   abajo-derecha, de lado a lado, y la alta que ocupa las dos filas. */
.bq-pl-ai { grid-column: 2; }
/* La de arriba a la derecha baja lo que ocupa la nota «Vista previa de cada
   plantilla»: en la maqueta su píldora está a 0,19 del alto del panel. */
.bq-pl-ad { grid-column: 3; margin-top: 64px; }
.bq-pl-bi { grid-column: 1 / 3; }
.bq-pl-bd { grid-column: 3 / 5; }
.bq-pl-ancha { grid-column: 1 / -1; }
.bq-pl-alta { grid-row: 1 / 3; }

/* Las notas a mano de dentro: la letra lleva el zoom del bloque, así que se
   sube para que pinten como la de la cabecera, que va fuera. */
.bq-pl-vistas .bq-nota { font-size: clamp(20px, 1.9vw, 27px); }
.bq-nota--pl1 { left: 16px; top: 10px; text-align: left; transform: rotate(-8deg); }
.bq-nota--pl1 .bq-curva { left: 70%; top: 92%; width: 34px; height: 42px; }
.bq-nota--pl2 { right: 2.4em; top: 10px; text-align: right; transform: rotate(-5deg); }
.bq-nota--pl2 .bq-curva { right: 60%; top: 92%; width: 34px; height: 42px; }

/* La etiqueta violeta que flota sobre la pantalla con el nombre de la
   categoría, como la de la maqueta: pisa la esquina de la tarjeta de correo. */
.bq-pl-vista .bq-pl-etq {
  position: absolute; z-index: 3; top: -16px; left: 43%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; background: #7c3aed; color: #fff;
  font-size: 13.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(76, 29, 149, .75); transform: rotate(-3deg);
}
.bq-pl-vista .bq-pl-etq > svg { width: 1.25em; height: 1.25em; flex: none; }
.bq-pl-vista .bq-pl-etq--wa .lgm { --k: 1.2em; }

/* El correo. Ligeramente girado, como en la maqueta, para que se lea como
   una hoja puesta encima y no como una celda de tabla. */
.bq-pl-mail {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 12px 14px 14px; border-radius: 18px; background: #fff;
  box-shadow: 0 2px 6px rgba(76, 29, 149, .06), 0 24px 48px -32px rgba(76, 29, 149, .45);
  transform: rotate(-1.4deg);
}
.bq-pl-mail--lado { transform: rotate(1.6deg); }
.bq-pl-mail > b {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding-bottom: 8px;
  border-bottom: 1px solid #f0edf8; font-size: 13px; font-weight: 800; color: var(--ink);
}
.bq-pl-mail > b > img { width: 1.4em; height: 1.4em; flex: none; }
.bq-pl-mail > b > u { margin-left: auto; font-size: .85em; font-weight: 600; color: var(--muted); }
.bq-pl-mail > s { display: block; font-size: 11px; color: var(--muted); }
.bq-pl-mail > em { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.bq-pl-mail > span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--ink-2); }
.bq-pl-mail > u { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
/* La banda de cabecera de cada diseño de correo, con los colores que trae el
   diseño de verdad: azul marino la corporativa, verde la amigable. */
.bq-pl-banda {
  display: block; margin: 7px 0 2px; padding: 7px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff;
}
.bq-pl-banda--corp { background: #1e2a44; }
.bq-pl-banda--amable { background: #16a34a; border-radius: 14px; }

/* Las líneas de un presupuesto o de un pedido */
.bq-pl-linea {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 5px; border-top: 1px solid #f3f0fa;
  font-size: 11.5px; color: var(--ink-2);
}
.bq-pl-linea > img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; background: #f5f3fb; }
.bq-pl-linea > em { min-width: 0; font-weight: 600; color: var(--ink); }
.bq-pl-linea > em > small { display: block; font-size: .86em; font-weight: 500; color: var(--muted); }
.bq-pl-linea > u { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bq-pl-linea.bq-pl-total { grid-template-columns: 1fr auto; margin-top: 6px; padding-top: 7px; border-top: 1px solid #e6e1f5; font-size: 12.5px; }
.bq-pl-linea.bq-pl-total > em { font-weight: 800; }

/* El presupuesto: la cabecera azul marino es la de la familia «Corporativa
   azul marino», que es la que se enseña. */
.bq-pl-pres { transform: rotate(-1.2deg); }
.bq-pl-mail > .bq-pl-pres-h {
  margin: -12px -14px 8px; padding: 11px 14px; border: 0; border-radius: 18px 18px 0 0;
  background: #14213d; color: #fff;
}
.bq-pl-pres-h > svg { width: 1.3em; height: 1.3em; flex: none; }
.bq-pl-pres-h > i {
  margin-left: auto; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); font-size: .82em; font-weight: 700;
}
.bq-pl-mail > .bq-pl-cli {
  display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
  border-bottom: 1px solid #f0edf8; font-size: 11px;
}
.bq-pl-cli > u { margin-left: auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.bq-pl-vista .bq-pl-ini {
  display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%;
  background: #f3eefd; color: #5b21b6; font-size: 10px; font-weight: 800;
}

/* Botones de pega: están en un dibujo, no se pulsan. */
.bq-pl-vista .bq-bot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; padding: 8px 12px; border-radius: 999px;
  background: #ede7fb; color: #5b21b6; font-size: 12px; font-weight: 700;
}
.bq-pl-vista .bq-bot > svg { width: 1.16em; height: 1.16em; flex: none; }
.bq-pl-vista .bq-bot--lleno { background: #6d28d9; color: #fff; }

/* El WhatsApp: una píldora blanca con el logotipo y, pegada debajo, la
   burbuja verde. La píldora pisa la burbuja como en la maqueta. */
.bq-pl-wa { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; transform: rotate(1.3deg); }
.bq-pl-wa--grande { transform: rotate(-1deg); }
.bq-pl-vista .bq-pl-canal {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 -9px 12px; padding: 5px 13px 5px 5px; border-radius: 999px; background: #fff;
  box-shadow: 0 6px 16px -8px rgba(76, 29, 149, .45);
  font-size: 12.5px; font-weight: 800; color: var(--ink);
}
.bq-pl-vista .bq-pl-logo {
  display: grid; place-items: center; flex: none; width: 1.75em; height: 1.75em;
  border-radius: 50%; background: #25d366; color: #fff;
}
.bq-pl-vista .bq-pl-logo .lgm { --k: 60%; }
.bq-pl-vista .bq-pl-globo {
  display: block; width: 100%; padding: 14px 14px 8px; border-radius: 16px; border-top-left-radius: 6px;
  background: #e7fbee; border: 1px solid #d3f3df; color: #1f3d31;
  font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 2px 6px rgba(21, 128, 61, .06), 0 20px 40px -30px rgba(76, 29, 149, .4);
}
.bq-pl-globo > b { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.bq-pl-globo > s { display: block; margin-top: 3px; }
.bq-pl-globo > i { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.bq-pl-globo > i > svg { width: 1.15em; height: 1.15em; flex: none; color: #6d28d9; }
.bq-pl-globo > u {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 5px;
  font-size: 10px; font-weight: 600; color: #6b8c7a;
}
.bq-pl-globo > u > svg { width: 1.25em; height: 1.25em; color: #3b82f6; }
.bq-pl-mini .bq-pl-globo--mini { margin-top: 2px; padding: 9px 11px; font-size: 11px; transform: none; }

/* Las mini-tarjetas: una por fila de la lista, con su botón de pega. */
.bq-pl-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bq-pl-mini {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px 13px; border-radius: 16px; background: #fff;
  box-shadow: 0 2px 6px rgba(76, 29, 149, .05), 0 20px 40px -30px rgba(76, 29, 149, .45);
}
.bq-pl-mini > b { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.bq-pl-mini > s { display: block; font-size: 11px; line-height: 1.42; color: var(--ink-2); }
.bq-pl-mini > .bq-pl-fila { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.bq-pl-mini > .bq-pl-fila > svg { width: 1.15em; height: 1.15em; flex: none; color: #6d28d9; }
.bq-pl-mini > .bq-bot { margin-top: auto; }
.bq-pl-vista .bq-pl-tile {
  display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 9px;
  background: #f3eefd; color: #6d28d9;
}
.bq-pl-vista .bq-pl-tile > svg { width: 56%; height: 56%; }
.bq-pl-vista .bq-pl-tile--oro { background: #fff4d6; color: #d97706; }
.bq-pl-vista .bq-pl-tile--claro { background: rgba(255, 255, 255, .22); color: #fff; }
.bq-pl-vista .bq-pl-tag {
  margin-left: auto; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: #eafaf0; color: #15803d; font-size: 10px; font-weight: 700;
}
.bq-pl-vista .bq-pl-tag--rojo { background: #fdeaea; color: #b91c1c; }
/* La muestra de colores de un diseño: la banda, el acento y el papel que
   trae ese diseño de verdad. */
.bq-pl-muestra { display: flex; gap: 4px; height: 18px; margin: 2px 0; }
.bq-pl-muestra > u { flex: 1; border-radius: 5px; }
.bq-pl-muestra--corp > u:nth-child(1) { background: #1e2a44; }
.bq-pl-muestra--corp > u:nth-child(2) { background: #2563eb; }
.bq-pl-muestra--corp > u:nth-child(3) { background: #e9edf5; }
.bq-pl-muestra--amable > u:nth-child(1) { background: #16a34a; }
.bq-pl-muestra--amable > u:nth-child(2) { background: #86efac; }
.bq-pl-muestra--amable > u:nth-child(3) { background: #f0fdf4; }
.bq-pl-muestra--boletin > u:nth-child(1) { background: #0f766e; }
.bq-pl-muestra--boletin > u:nth-child(2) { background: #14b8a6; }
.bq-pl-muestra--boletin > u:nth-child(3) { background: #ecfdf5; }
.bq-pl-muestra--marino > u:nth-child(1) { background: #14213d; }
.bq-pl-muestra--marino > u:nth-child(2) { background: #2563eb; }
.bq-pl-muestra--marino > u:nth-child(3) { background: #e8edf7; }
.bq-pl-muestra--eco > u:nth-child(1) { background: #2f6b3a; }
.bq-pl-muestra--eco > u:nth-child(2) { background: #8fcf9a; }
.bq-pl-muestra--eco > u:nth-child(3) { background: #f1f7ec; }
.bq-pl-muestra--tech > u:nth-child(1) { background: #1d4ed8; }
.bq-pl-muestra--tech > u:nth-child(2) { background: #60a5fa; }
.bq-pl-muestra--tech > u:nth-child(3) { background: #e6f0ff; }
/* Una familia de presupuesto por fila: su muestra de colores y su nombre.
   Son tres de las diez familias, las mismas tres que lista el acordeón. */
.bq-pl-mini > .bq-pl-fam {
  display: flex; align-items: center; gap: 9px; padding: 5px 0;
  border-top: 1px solid #f3f0fa; font-size: 11.5px; font-weight: 600; color: var(--ink);
}
.bq-pl-fam > .bq-pl-muestra { flex: none; width: 54px; height: 16px; margin: 0; }

/* La confirmación verde (presupuesto aceptado) */
.bq-pl-ok {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 16px; background: #eafaf0; border: 1px solid #d7f2e2;
}
.bq-pl-ok > i { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: #22c55e; font-size: 12px; }
.bq-pl-ok > i > svg { width: 60%; height: 60%; }
.bq-pl-ok > div { min-width: 0; }
.bq-pl-ok > div > b { display: block; font-size: 12.5px; font-weight: 800; color: #14532d; }
.bq-pl-ok > div > s { display: block; margin-top: 2px; font-size: 11px; line-height: 1.42; color: #3f6b52; }

/* Los estados, en pastillas: los de verdad del producto, y nada más. */
.bq-pl-vista .bq-pl-pasos { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 2px; font-size: 10.5px; font-weight: 700; }
.bq-pl-pasos > s { padding: 4px 9px; border-radius: 999px; background: #f3f0fb; color: #6b6a80; }
.bq-pl-pasos > s.es-on { background: #6d28d9; color: #fff; }
.bq-pl-pasos > em { color: #b4b1c6; font-weight: 800; }

/* El recorrido de un pedido: un punto por estado, con su fecha. Los dos
   estados que hay —confirmado y entregado—; el cancelado es la otra salida,
   y va en su propia tarjeta. El paso ya cumplido lleva `bq-pl-hecho`, con
   prefijo: una clase nueva sin él no la cuenta la ley de clases y pasaría
   sin que nadie la mida. */
.bq-pl-mini > .bq-pl-ruta { display: flex; flex-direction: column; gap: 0; margin: 2px 0; }
.bq-pl-ruta > s {
  position: relative; display: block; padding: 3px 0 5px 22px; font-size: 11px; line-height: 1.35; color: var(--ink-2);
}
.bq-pl-ruta > s::before {
  content: ''; position: absolute; left: 3px; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 2px solid #c9c1ea;
}
.bq-pl-ruta > s.bq-pl-hecho::before { background: #22c55e; border-color: #22c55e; }
.bq-pl-ruta > s.es-on::before { background: #6d28d9; border-color: #6d28d9; box-shadow: 0 0 0 3px #ede7fb; }
/* La raya que une los puntos, menos en el último. */
.bq-pl-ruta > s:not(:last-child)::after {
  content: ''; position: absolute; left: 7px; top: 17px; bottom: -4px; width: 1.5px; background: #e4def5;
}
.bq-pl-ruta > s > b { display: block; font-weight: 800; color: var(--ink); }
.bq-pl-ruta > s > u { display: block; font-size: .95em; color: var(--muted); }

/* Valoraciones: la pregunta, las cinco estrellas y el botón */
.bq-pl-valora { gap: 6px; }
.bq-pl-mail > .bq-pl-pregunta { margin-top: 4px; text-align: center; font-size: 13px; }
.bq-pl-estrellas { display: flex; justify-content: center; gap: 7px; padding: 9px; border-radius: 10px; background: #fff7e6; }
.bq-pl-estrellas > u {
  width: 20px; height: 20px; background: #f5b301;
  -webkit-mask: var(--estrella) center / contain no-repeat; mask: var(--estrella) center / contain no-repeat;
  --estrella: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 2.6 2.9 5.9 6.5 1-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.5l6.5-1z'/></svg>");
}

/* El bono: violeta, con las sesiones gastadas como puntos. Los datos son los
   del modelo «Bono 5 masajes relajantes» que trae el producto. */
.bq-pl-bono {
  padding: 12px 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #6d28d9 0%, #9d6bfa 100%);
  box-shadow: 0 2px 6px rgba(76, 29, 149, .1), 0 22px 44px -28px rgba(76, 29, 149, .7);
  transform: rotate(1.2deg);
}
.bq-pl-bono > b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.bq-pl-bono > s { display: block; margin-top: 3px; font-size: 11px; opacity: .92; }
.bq-pl-bono > .bq-pl-sesiones { display: flex; gap: 6px; margin-top: 9px; }
.bq-pl-sesiones > u { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.bq-pl-sesiones > u.es-on { background: #fff; }
.bq-pl-bono > em { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; font-weight: 700; }

/* El saludo automático lleva su interruptor encendido */
.bq-pl-saludo > b > .bq-pl-sw {
  position: relative; flex: none; margin-left: auto; width: 2.3em; height: 1.3em;
  border-radius: 999px; background: #6d28d9;
}
.bq-pl-saludo > b > .bq-pl-sw::after {
  content: ''; position: absolute; top: .15em; right: .15em; width: 1em; height: 1em;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* ── LOS CONTROLES: puntos y flechas ─────────────────────────────────────
   Son botones de verdad, fuera de los dibujos, y abren la categoría del
   acordeón: así los dos controles cuentan lo mismo. Nada de «desplaza para
   ver más»: no hay nada que desplazar. */
.bq-pl-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.bq-pl-fl {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1px solid #e9e3ff; background: #fff; color: #5b21b6; cursor: pointer;
  box-shadow: 0 8px 18px -12px rgba(76, 29, 149, .6);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.bq-pl-fl > svg { width: 44%; height: 44%; }
.bq-pl-fl:hover { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.bq-pl-fl:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }
.bq-pl-puntos { display: flex; align-items: center; gap: 2px; }
/* El punto se pinta chico pero se pulsa grande: 22 px de blanco alrededor de
   9 de tinta, que con el zoom del bloque son 6 y no se acertaría. */
.bq-pl-punto {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.bq-pl-punto::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #d6cdf3;
  transition: background .18s ease, transform .18s ease;
}
.bq-pl-punto:hover::before { background: #b39df0; }
.bq-pl-punto.es-on::before { background: #6d28d9; transform: scale(1.3); }
.bq-pl-punto:focus-visible { outline: 2px solid #6d28d9; outline-offset: 1px; border-radius: 50%; }

/* ── PANTALLAS ESTRECHAS ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .bq-pl-dos { grid-template-columns: 40fr 60fr; }
}
@media (max-width: 900px) {
  /* El zoom es para la ventana del dueño; en un móvil vuelve a 1 para que
     la letra se lea. Acordeón arriba, vista previa debajo, y las piezas de
     cada pantalla en una sola columna, sin giro y sin huecos para notas:
     las notas a mano se esconden, que aquí caerían encima del correo. */
  .bq-pl-dos { grid-template-columns: minmax(0, 1fr); zoom: 1; }
  .bq-pl-vistas { padding: 26px 14px 12px; }
  .bq-pl-vistas .bq-nota { display: none; }
  .bq-pl-lienzo .bq-pl-vista { grid-template-columns: minmax(0, 1fr); }
  /* En una columna, apiladas en la misma celda, el lienzo media lo que la
     mas alta (935 px a 390) y bajo las cortas quedaba media pantalla en
     blanco antes de las flechas. Aqui la que no toca no ocupa sitio. */
  .bq-pl-lienzo .bq-pl-vista:not(.is-on) { display: none; }
  .bq-pl-ai, .bq-pl-ad, .bq-pl-bi, .bq-pl-bd, .bq-pl-ancha { grid-column: auto; margin-top: 0; }
  .bq-pl-alta { grid-row: auto; }
  .bq-pl-minis { grid-template-columns: minmax(0, 1fr); }
  .bq-pl-vista .bq-pl-etq { left: 50%; transform: translateX(-50%) rotate(-3deg); }
  .bq-pl-mail, .bq-pl-mail--lado, .bq-pl-pres, .bq-pl-wa, .bq-pl-wa--grande, .bq-pl-bono { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bq-pl-lienzo .bq-pl-vista, .bq-pl, .bq-pl-x, .bq-pl-fl, .bq-pl-punto::before { transition: none; }
}

/* ══ 4b · GESTIÓN, A DOS COLUMNAS COMO SU MAQUETA ═════════════════════════
   La maqueta del dueño (gestion.webp, 1672x941) pone el texto a la izquierda
   —un 38 % del ancho— y la escena a la derecha: el panel inclinado y cinco
   tarjetas flotando alrededor, unidas por flechas. Hoy la cabecera iba
   centrada y la escena debajo, con tres flotantes.

   Lo que ya existía se reutiliza tal cual (.bq-escena, .bq-panel, .bq-riel,
   .bq-ajustes, .bq-aj, .bq-ops, .bq-checks, .bq-lineas, .bq-sw, .bq-flota,
   .bq-tira): estas reglas sólo lo recolocan y lo escalan. Van TODAS con
   `#bq-gestion` delante por dos motivos: para no contradecir a las reglas de
   siempre —la ley 8 del banco no deja que un mismo selector diga dos cosas— y
   para ganarles en especificidad sin depender de dónde queden pegadas.

   EL ZOOM NO ENCOGE LA ESCENA. Las tarjetas van en % de la escena y la escena
   en % de la columna, así que el zoom sólo toca la letra y los rellenos (lo
   que va en vw y en px): la letra encoge, las cajas no. Por eso la escena se
   hace más apaisada que en la maqueta (1,68 contra 1,44): la maqueta entera,
   llevada a 1.280 de ancho, mide 644 y la pantalla del dueño da 501. Medido:
   a 1,62 la sección daba 516; a 1,68 la escena mide 407 y la sección 501.

   LA LETRA PARA DONDE PARA EL ANCHO. `.bq-sec .mk-wrap` tope en 1.680 px,
   que con el zoom .74 son 1.243 px de ventana: a partir de ahí las cajas ya
   no crecen (la escena incluso encoge un 2 % hasta 1.920, porque el relleno
   del wrap sigue en vw). Pero un `clamp(…, 1.05vw, 15px)` seguía creciendo
   hasta 1.429 px de ventana, y una letra más grande en una caja igual envuelve
   más líneas: a 1.440 «Idiomas» pasaba de 133 a 188 px de alto y tapaba
   «Cuándo debe hablar», y a 1.920 el panel crecido empujaba «Reglas» sobre la
   burbuja. Por eso TODOS los topes de aquí son el valor de su vw a 1.243 px
   de ventana (1vw = 12,43 px): la letra y la caja se paran a la vez.

   El `zoom: .74` del bloque NO se repite aquí: ya lo dice la hoja en su regla
   de «los dos bloques que se salían de la pantalla», y sigue siendo el justo.
   Sólo se recorta el aire de abajo y se da un poco más arriba: la maqueta
   deja un 8 % del bloque antes de la primera tarjeta y aquí, con 501 px de
   pantalla, caben 18. El selector lleva la clase porque `#bq-gestion` a
   secas ya está escrito en la hoja (el zoom) y la ley no deja que un mismo
   selector se lea dos veces. */
#bq-gestion.bq-sec { padding-top: clamp(12px, 2vw, 24.9px); padding-bottom: clamp(10px, 1.5vw, 18.6px); }

/* ── LAS DOS COLUMNAS ────────────────────────────────────────────────────
   41/58 con un 1 % de hueco, medido en la maqueta: la línea más larga del
   titular llega al 0,405 del ancho de contenido y la primera tarjeta empieza
   en el 0,409. La escena sigue arrancando en el 42 %, así que mide lo mismo
   que con 38/58 y 4 %: lo que cambia es que el texto puede ser tan grande
   como en la maqueta sin tocar la escena. */
#bq-gestion .bq-ges { position: relative; display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 58fr); column-gap: 1%; align-items: start; }
#bq-gestion .bq-ges-txt { min-width: 0; }

/* LA CABECERA, A LA IZQUIERDA Y GRANDE. La cabecera compacta de los bloques
   que van justos de alto no hace falta aquí: la columna de texto tiene todo
   el alto de la escena para ella, y la maqueta pone el titular a tres líneas
   del tamaño del de arriba.
   LOS TAMAÑOS SON LOS DE LA MAQUETA, en fracción del ancho de contenido: el
   titular llena la columna (la maqueta llega al 0,405 del contenido), el
   subtítulo parte donde parte ella («…para que cada / respuesta encaje…»:
   su primera línea mide 0,367 del contenido) y la píldora deja de ser un
   sello diminuto. Los topes vuelven a ser el valor de su vw a 1.243 px. */
#bq-gestion .bq-ges .bq-cab { text-align: left; margin: 0 0 clamp(14px, 1.8vw, 22.4px); padding-top: clamp(6px, 1vw, 12.4px); }
#bq-gestion .bq-ges .bq-pill { margin-bottom: clamp(10px, 1.3vw, 16.2px); padding: clamp(5px, .5vw, 6.2px) 0; font-size: clamp(10px, 1.08vw, 13.4px); }
#bq-gestion .bq-ges .bq-cab .bq-h2 { font-size: clamp(26px, 4.35vw, 54px); line-height: 1.04; margin: 0 0 clamp(8px, 1vw, 12.4px); }
#bq-gestion .bq-ges .bq-cab .bq-sub { margin: 0; max-width: none; font-size: clamp(14px, 1.93vw, 24px); line-height: 1.4; }
/* La primera mitad de la frase va más oscura, como en la maqueta: es la lista
   de lo que se configura, y lo demás es la explicación. */
#bq-gestion .bq-ges .bq-sub > b { font-weight: 700; color: var(--ink-2); }

/* ── LOS CUATRO RASGOS, EN REJILLA 2x2 ────────────────────────────────────
   Cada rasgo es baldosa + <h3> + <p>, el mismo esqueleto que `.bq-card-h`:
   esta columna SE LEE (no está en aria-hidden) y un título en <b> con la
   línea de abajo en <s> es, para un lector de pantalla, texto tachado. */
#bq-gestion .bq-rasgos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.7vw, 21.1px) clamp(10px, 1.4vw, 17.4px); }
#bq-gestion .bq-rasgos > li { display: flex; align-items: flex-start; gap: clamp(8px, 1vw, 12.4px); }
#bq-gestion .bq-rasgos > li > div { min-width: 0; flex: 1; }
/* La baldosa no tiene regla suelta en la hoja (sólo dentro de tarjeta,
   pregunta y ajuste), así que aquí se le da la suya. */
#bq-gestion .bq-rasgos .bq-ic { display: grid; place-items: center; flex: none; width: clamp(36px, 4.3vw, 53.4px); height: clamp(36px, 4.3vw, 53.4px); border-radius: clamp(10px, 1.25vw, 15.5px); background: #f3eefd; color: #6d28d9; }
#bq-gestion .bq-rasgos .bq-ic > svg { width: 50%; height: 50%; }
#bq-gestion .bq-rasgos h3 { font-family: var(--font-display, inherit); font-size: clamp(13px, 1.55vw, 19.3px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; margin: .1em 0 .15em; }
#bq-gestion .bq-rasgos p { font-size: clamp(11px, 1.3vw, 16.2px); color: var(--muted); line-height: 1.38; margin: 0; }

/* ── LA ESCENA ───────────────────────────────────────────────────────────
   Todo lo de dentro va colocado suelto en % de la caja, así que la caja
   necesita un alto propio: el que le da su proporción. */
#bq-gestion .bq-escena { padding: 0; aspect-ratio: 1.68; }
/* La nota a mano, arriba a la derecha de la escena. En la maqueta arranca a
   0,059 del alto del bloque; a ras del borde (top: 0) el giro la subía 4 px
   por encima del wrap, y 1em por encima la dejaba fuera de la sección, bajo
   la barra fija. */
#bq-gestion .bq-nota--ges { right: 1.9em; top: 1.15em; transform: rotate(-4deg); }
#bq-gestion .bq-nota--ges .bq-curva { right: 30px; top: 100%; }

/* EL PANEL, INCLINADO. Un giro en tres ejes con perspectiva: en la maqueta el
   lado izquierdo del panel se va hacia la izquierda al bajar y las filas de
   dentro se inclinan más cuanto más abajo están, que es lo que hace una
   perspectiva y no un giro plano. `min-height` y no `height`: si la letra
   crece más que la caja, la caja crece con ella en vez de desbordar. */
#bq-gestion .bq-panel { position: absolute; z-index: 1; left: 3.5%; top: 21.5%; width: 64%; min-height: 62%; grid-template-columns: 29% minmax(0, 1fr); gap: clamp(8px, .9vw, 11.2px); padding: clamp(8px, .9vw, 11.2px); transform: perspective(1400px) rotateY(-9deg) rotateX(4deg) rotate(3.5deg); }
#bq-gestion .bq-riel { gap: 4px; padding: clamp(6px, .7vw, 8.7px) clamp(4px, .5vw, 6.2px); }
#bq-gestion .bq-riel > b { font-size: clamp(13px, 1.25vw, 15.5px); padding: 2px 8px clamp(8px, 1vw, 12.4px); }
#bq-gestion .bq-riel > span { font-size: clamp(10.5px, 1vw, 12.4px); padding: clamp(6px, .62vw, 7.7px) 10px; border-radius: 11px; }

/* LA TARJETA BLANCA DEL PANEL es una sola —«Tono de voz»— y ocupa toda la
   celda: la maqueta no trae la cabecera «Configuración» ni la rejilla de seis
   ajustes de hoy. `.bq-aj` se queda como esqueleto de dentro (título, línea,
   pastillas) y pierde su caja, que ya la pone `.bq-ajustes`. */
#bq-gestion .bq-ajustes { display: flex; padding: clamp(10px, 1.1vw, 13.7px); border-radius: clamp(12px, 1.2vw, 14.9px); background: #fff; box-shadow: 0 1px 2px rgba(76, 29, 149, .05), 0 14px 30px -24px rgba(76, 29, 149, .35); }
#bq-gestion .bq-aj--tono { flex: 1; padding: 0; border: 0; background: none; border-radius: 0; gap: clamp(6px, .7vw, 8.7px); }
#bq-gestion .bq-aj--tono > b { font-family: var(--font-display, inherit); font-size: clamp(14px, 1.4vw, 17.4px); letter-spacing: -.02em; }
#bq-gestion .bq-aj--tono > s { font-size: clamp(10px, .95vw, 11.8px); margin-top: -2px; }
#bq-gestion .bq-aj--tono .bq-ops { margin-top: 2px; gap: clamp(5px, .5vw, 6.2px); }
#bq-gestion .bq-aj--tono .bq-ops > u { font-size: clamp(10px, .95vw, 11.8px); padding: .45em 1.35em; }
/* La píldora «Vista previa», a la derecha del título. */
#bq-gestion .bq-vp { margin-left: auto; display: inline-flex; align-items: center; gap: .4em; padding: .38em .9em; border-radius: 999px; background: #f3eefd; color: #5b21b6; font-size: .62em; font-weight: 700; letter-spacing: 0; }
#bq-gestion .bq-vp > svg { width: 1.25em; height: 1.25em; flex: none; }
/* La respuesta de ejemplo y, a su derecha, tres rayas de texto que no se lee:
   en la maqueta rellenan la tarjeta sin decir nada, y eso es lo que son. */
#bq-gestion .bq-aj-vista { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(8px, .9vw, 11.2px); align-items: center; }
#bq-gestion .bq-aj-b { display: flex; align-items: flex-start; gap: .6em; padding: .75em .9em; border-radius: 1em; background: #ece7fb; color: #3c2a63; font-size: clamp(10px, .95vw, 11.8px); line-height: 1.4; }
#bq-gestion .bq-chispa { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 50%; background: #fff; color: #6d28d9; }
#bq-gestion .bq-chispa > svg { width: 60%; height: 60%; }
#bq-gestion .bq-rayas { display: flex; flex-direction: column; gap: .6em; font-size: clamp(10px, .95vw, 11.8px); }
#bq-gestion .bq-rayas > s { display: block; height: .6em; border-radius: 999px; background: #ece7fb; }
#bq-gestion .bq-rayas > s:nth-child(2) { width: 78%; }
#bq-gestion .bq-rayas > s:nth-child(3) { width: 58%; }

/* ── LAS CINCO TARJETAS QUE FLOTAN ───────────────────────────────────────
   Cuatro de ellas llevan `.bq-aj` además de `.bq-flota`: así heredan el
   título con baldosa, el interruptor, las pastillas y las filas con marca
   que ya tenían los ajustes de dentro del panel, en vez de volver a
   dibujarlos. La de WhatsApp conserva el esqueleto de hoy (cara + mensaje).
   El ancho va en % de la escena, que es como se midió en la maqueta. */
#bq-gestion .bq-escena .bq-flota { font-size: clamp(9.5px, 1.05vw, 13.05px); line-height: 1.35; padding: clamp(9px, 1vw, 12.4px); border-radius: clamp(12px, 1.2vw, 14.9px); border: 0; }
#bq-gestion .bq-escena .bq-flota.bq-aj { flex-direction: column; align-items: stretch; gap: .6em; }
#bq-gestion .bq-flota.bq-aj > b { font-size: 1.25em; gap: .55em; letter-spacing: -.015em; }
#bq-gestion .bq-flota.bq-aj > s { font-size: .95em; line-height: 1.35; margin-top: -.2em; }
#bq-gestion .bq-flota .bq-ic--s { width: 2.4em; height: 2.4em; border-radius: .7em; }
#bq-gestion .bq-flota .bq-sw { font-size: 1em; }
#bq-gestion .bq-flota .bq-lineas .bq-sw { font-size: 1.15em; }
#bq-gestion .bq-flota .bq-checks, #bq-gestion .bq-flota .bq-lineas { gap: .55em; }
#bq-gestion .bq-flota .bq-checks > u, #bq-gestion .bq-flota .bq-lineas > u { font-size: 1em; gap: .6em; }
#bq-gestion .bq-flota .bq-ops { gap: .45em; margin-top: 0; }
#bq-gestion .bq-flota .bq-ops > u { font-size: .95em; padding: .38em 1em; }

/* La de WhatsApp: el logotipo verde suelto a la izquierda, la cara y el
   mensaje, como en la maqueta; hoy el logotipo iba pegado a la cara.
   Los `top` dejan entre «Idiomas» y «Cuándo debe hablar» el hueco de la
   maqueta (24 px de 652 = un 3,7 % del alto): con la escena más apaisada las
   tarjetas son más altas en proporción, y a 34 % / 67 % se quedaban a 2 px.
   TODO VA UN 2,5 % MÁS ABAJO que en la primera vuelta (panel, tarjetas y
   flechas por igual): «Bloquea spam», girada y a ras del borde, asomaba 7 px
   por encima del wrap. Abajo sobra: «Cuándo» acaba antes que la escena. */
#bq-gestion .bq-flota--wa { left: 0; top: 4.5%; width: 31%; transform: rotate(-5deg); align-items: center; gap: .7em; }
#bq-gestion .bq-flota--wa > .bq-wa { width: 2.2em; height: 2.2em; margin: 0; box-shadow: none; }
#bq-gestion .bq-flota--wa > img { width: 2.9em; height: 2.9em; }
#bq-gestion .bq-flota--wa em > b { font-size: 1.15em; }
#bq-gestion .bq-flota--spam { left: 43%; top: 2.5%; width: 33%; transform: rotate(3.5deg); }
#bq-gestion .bq-flota--idiomas { right: 0; top: 33.5%; width: 30%; transform: rotate(-5deg); }
#bq-gestion .bq-flota--reglas { left: 22%; top: 68.5%; width: 31%; transform: rotate(-2deg); }
#bq-gestion .bq-flota--cuando { left: 58%; top: 70.5%; width: 34%; transform: rotate(-4deg); }

/* ── LAS FLECHAS Y LAS RAYITAS, EN SVG ───────────────────────────────────
   Van colocadas sueltas y sólo con ancho: el alto lo pone la proporción de
   cada dibujo, para que un trazo de 100 unidades mida lo mismo en todas. */
#bq-gestion .bq-ges-flecha, #bq-gestion .bq-ges-tics { position: absolute; z-index: 3; height: auto; pointer-events: none; overflow: visible; fill: none; stroke: var(--violet); stroke-linecap: round; stroke-linejoin: round; }
#bq-gestion .bq-ges-flecha { stroke-width: 3.2; }
#bq-gestion .bq-ges-tics { stroke-width: 2.6; opacity: .75; }
#bq-gestion .bq-ges-flecha--1 { left: 30.5%; top: 13.5%; width: 10%; }
#bq-gestion .bq-ges-flecha--2 { left: 62%; top: 27.5%; width: 13%; }
#bq-gestion .bq-ges-flecha--3 { left: 83.5%; top: 61.5%; width: 4.5%; }
#bq-gestion .bq-ges-flecha--4 { left: 12%; top: 75.5%; width: 10%; }
#bq-gestion .bq-ges-tics--1 { left: -5.5%; top: 3.5%; width: 3.6%; }
#bq-gestion .bq-ges-tics--2 { left: 92.5%; top: 65.5%; width: 3.6%; }

/* ── LA TIRA DE CUATRO, MÁS ESTRECHA ─────────────────────────────────────
   En la maqueta acaba bajo las reglas de actuación, no bajo la última
   tarjeta: deja sitio a la derecha para que «Cuándo debe hablar» cuelgue por
   debajo de la escena sin pisarla. */
#bq-gestion .bq-tira { width: 63.5%; margin-top: clamp(6px, .8vw, 9.9px); padding: clamp(10px, 1vw, 12.4px) clamp(8px, .8vw, 9.9px); }
#bq-gestion .bq-tira > li > b { font-size: clamp(12px, 1.08vw, 13.4px); }
#bq-gestion .bq-tira > li > span { font-size: clamp(10.5px, .9vw, 11.2px); }

/* ── PANTALLAS ESTRECHAS ─────────────────────────────────────────────────
   Por debajo de 1.180 la hoja ya convierte la escena en una rejilla con las
   tarjetas quietas (sin flotar); aquí sólo se apilan las dos columnas, se
   quita la inclinación, y las flechas —que señalaban sitios que ya no están
   ahí— se van. */
@media (max-width: 1180px) {
  #bq-gestion .bq-ges { grid-template-columns: minmax(0, 1fr); row-gap: clamp(14px, 2vw, 24px); }
  #bq-gestion .bq-escena { aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #bq-gestion .bq-panel { position: static; width: auto; min-height: 0; transform: none; }
  #bq-gestion .bq-escena .bq-flota { width: auto; transform: none; }
  #bq-gestion .bq-ges-flecha, #bq-gestion .bq-ges-tics, #bq-gestion .bq-nota--ges { display: none; }
  #bq-gestion .bq-tira { width: auto; }
  /* Cinco tarjetas en dos columnas dejan una celda vacía, y a 1.000 px era la
     de al lado de «Cuándo debe hablar». Ésta ocupa las dos y pone sus tres
     filas en línea, que a ese ancho caben de sobra. */
  #bq-gestion .bq-flota--cuando { grid-column: 1 / -1; }
  #bq-gestion .bq-flota--cuando .bq-lineas { flex-direction: row; flex-wrap: wrap; gap: .6em 1.6em; }
  #bq-gestion .bq-flota--cuando .bq-lineas > u { flex: 1 1 14em; }
}
@media (max-width: 900px) {
  #bq-gestion .bq-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  #bq-gestion .bq-escena { grid-template-columns: minmax(0, 1fr); }
  /* A una columna ya no sobra celda, y tres filas en línea no caben: vuelven
     a apilarse como las demás. Y la base de 14em de arriba se quita: en una
     columna `flex-basis` es ALTO, y cada fila medía 98 px en vez de 10. */
  #bq-gestion .bq-flota--cuando .bq-lineas { flex-direction: column; }
  #bq-gestion .bq-flota--cuando .bq-lineas > u { flex: 0 0 auto; }
  #bq-gestion .bq-rasgos { grid-template-columns: minmax(0, 1fr); }
}

/* ══ 5 · PREGUNTAS FRECUENTES, CALCADAS A LA MAQUETA «dudas» (2026-10-02) ═══
   La maqueta mide 1858×846. Llevada a los 1280 de la ventana del dueño
   (×0,689) da estas medidas, y de ahí salen los números de abajo:
     buscador 58→40 de alto y 0,448 del ancho · chips 56→39 de alto, hueco 16→11
     panel 0,917 del ancho, relleno 20→14 arriba y 26→18 a los lados
     tarjeta 108→74 de alto · baldosa 66→45 · hueco entre filas 16→11
     de la rejilla a «¿Tienes otra pregunta?» 24→17 · su círculo 68→47.
   Lo que ya existía (cabecera, buscador, chips, `.bq-q`) se reutiliza y sólo
   se afina dentro de `#bq-faq`; lo nuevo —el panel, «Ver más dudas» y la fila
   de ayuda— lleva su clase. */

/* EL ZOOM, EL JUSTO PARA CABER. Sustituye al `#bq-faq { zoom: .67 }` de hoy:
   con seis dudas en tres filas en vez de catorce en siete, el bloque mide
   menos y la letra puede ir más grande. Medido en prueba.html a 1280×585 (la
   ventana del dueño), con todo revelado y a ,84: del principio del bloque al
   borde de abajo del panel van 477, y el cierre —que trae 24 de margen
   propio y no se toca— arranca en 501, justo los 501 que deja la barra. Las
   piezas caen cerca de donde la maqueta, llevada a esos 501, las pone:
   buscador 84–117 (maqueta 103–136), chips 130–164 (150–183), panel 174–477
   (193–486); todo unos 20 más arriba, que es lo que el cierre necesita para
   no cruzar el pliegue. Un zoom mayor lo cruzaría; uno menor haría la letra
   más chica (la pill, a ,84, ya se pinta a 8,6). */
/* Y ABAJO, EL AIRE QUE ANTES PONÍA EL CIERRE: con el cierre en su sección,
   los 47 px de `.bq-sec` dejaban las dudas en 527, 13 más de lo que cabe
   bajo la barra, y la rueda tenía que bajar por dentro antes de saltar. */
#bq-faq { zoom: .84; --z: .84; padding-bottom: clamp(20px, 2.2vw, 38px); }
/* El cierre salió de las dudas a su sección propia (una parada de la rueda
   cada uno) y se lleva el mismo zoom, para pintar exactamente como pintaba. */
#bq-cierre { zoom: .84; --z: .84; }

/* ── EL BUSCADOR, A LA MEDIDA DE LA MAQUETA ────────────────────────────────
   El ancho va en TANTO POR CIENTO del wrap y no en `vw`: un `vw` se mide en
   la ventana de verdad y luego el `zoom` del bloque lo encoge, así que
   `44.8vw` daba 0,381 del ancho del bloque cuando la maqueta pide 0,446. El
   wrap ocupa 0,942 del bloque: 0,446 / 0,942 = 47,3 %. El tope de 720 está
   por encima de lo que da el 47,3 % a 1280 (671 antes del zoom): con el tope
   de 640 que tenía antes, el porcentaje no llegaba a mandar y el buscador se
   quedaba en 0,425. */
#bq-faq .bq-faq-busca {
  max-width: clamp(320px, 47.3%, 720px);
  padding: 3px 3px 3px 14px; margin-bottom: clamp(10px, 1.15vw, 18px);
}
#bq-faq .bq-faq-busca > svg { width: 16px; height: 16px; }
#bq-faq .bq-faq-busca input { font-size: clamp(12px, 1.05vw, 14.5px); }
/* El botón hereda el interlineado del cuerpo (1,6) y eso solo subía la barra
   de 40 a 44: a 1,2 la barra mide lo que la maqueta. */
#bq-faq .bq-faq-busca-b { padding: 8px 18px; font-size: clamp(12px, 1vw, 13.5px); line-height: 1.2; }

/* ── LAS SIETE CATEGORÍAS, CON ICONO ─────────────────────────────────────────
   En la maqueta no son píldoras rellenas: son fichas blancas con una sombra
   corta, el icono en violeta delante del rótulo, y la activa va en lavanda con
   el borde violeta y el rótulo violeta. El guion sigue usando `.es-on`, así
   que la clase no cambia; cambia su pintura, y sólo dentro de este bloque. */
#bq-faq .bq-faq-cats { gap: clamp(8px, 1.05vw, 14px); margin-bottom: clamp(9px, .94vw, 13px); max-width: none; }
/* La fila de las siete, medida en la maqueta, va de 0,136 a 0,864 del ancho
   (0,728); con el relleno y el hueco de antes se quedaba en 0,659. La altura
   ya era la de la maqueta (33 contra 33), así que lo que se abre es sólo lo
   horizontal: relleno a los lados, hueco entre icono y rótulo, y un pelo de
   letra. */
#bq-faq .bq-faq-cat {
  display: inline-flex; align-items: center; gap: clamp(8px, .85vw, 12px);
  padding: clamp(7px, .78vw, 11px) clamp(13px, 1.55vw, 22px); border-radius: clamp(9px, .8vw, 12px);
  border: 1px solid #fff; background: #fff;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .05), 0 12px 26px -20px rgba(76, 29, 149, .45);
  font-size: clamp(11px, .95vw, 13px); font-weight: 600; color: var(--ink-2);
}
#bq-faq .bq-faq-cat > svg { width: 1.34em; height: 1.34em; flex: none; color: #6d28d9; }
#bq-faq .bq-faq-cat:hover { border-color: #d9ccfa; color: #6d28d9; }
#bq-faq .bq-faq-cat.es-on { background: #f3eefd; border-color: #8b5cf6; color: #5b21b6; }
#bq-faq .bq-faq-cat:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }

/* ── EL PANEL QUE ABRAZA LAS DUDAS Y LA AYUDA ──────────────────────────────
   En la maqueta las tarjetas no van sueltas sobre el papel: van dentro de un
   panel casi blanco (muestras de la maqueta: 247,246,253 sobre un fondo
   239,236,253), con la fila de «¿Tienes otra pregunta?» dentro. Es lo que
   convierte seis tarjetas y un botón en UN bloque. */
.bq-faq-panel {
  /* La maqueta deja 0,042 del ancho a cada lado del panel y el wrap de la
     casa deja 0,029: la diferencia, en tanto por ciento del wrap, es este
     margen. Sin él el panel medía 0,942 del bloque y la maqueta pide 0,917. */
  margin: 0 1.35%;
  padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.4vw, 20px) clamp(9px, .95vw, 13px);
  border-radius: clamp(16px, 1.72vw, 26px);
  background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 2px rgba(76, 29, 149, .04), 0 26px 60px -46px rgba(76, 29, 149, .4);
}
/* LAS SEIS TARJETAS MIDEN LO MISMO. En la maqueta las seis van a 0,128 del
   alto; con filas `auto`, la fila cuyas dos respuestas caben en una línea
   salía 8 px más baja que las otras (51,6 contra 60,1). `1fr` iguala las
   filas a la más alta y `stretch` (la regla general pone `start`) hace que
   cada tarjeta llene la suya. */
#bq-faq .bq-dos--faq { gap: clamp(8px, .86vw, 12px) clamp(8px, .9vw, 13px); }
/* Y SOLO EN LA PRIMERA VISTA, la de las seis abiertas. Con las catorce a la
   vista, igualar estiraba las ocho cerradas a lo que mide una abierta: 37 px
   en blanco debajo de cada pregunta. El atributo lo pone el guion cuando
   recorta; sin guion se ven las catorce, cada una con su alto. */
#bq-faq .bq-dos--faq[data-recorte] { grid-auto-rows: 1fr; align-items: stretch; }

/* ── CADA DUDA: BALDOSA ARRIBA A LA IZQUIERDA, CHEVRON A MEDIA ALTURA ──────
   Hoy la baldosa iba centrada en vertical y el chevron en la línea de la
   pregunta. En la maqueta la baldosa se alinea con la PREGUNTA (arriba) y el
   chevron queda a media altura de la tarjeta, en el borde derecho. El chevron
   sigue dentro del `<summary>`: colocarlo suelto no lo saca del DOM, así que
   pulsarlo sigue abriendo la duda. */
#bq-faq .bq-q {
  padding: clamp(8px, .7vw, 11px) clamp(38px, 3.9vw, 62px) clamp(8px, .7vw, 11px)
           calc(clamp(10px, .97vw, 14px) + clamp(38px, 3.4vw, 56px) + clamp(12px, 1.4vw, 19px));
  /* La tarjeta mide como mínimo lo que mide su baldosa más el relleno: así
     una duda cerrada no se queda más baja que su propio icono. Va aquí y NO en
     el `<summary>`: puesto allí, la respuesta caía por debajo de la baldosa en
     vez de quedarse a su lado, y cada tarjeta medía 102 en vez de 74. */
  min-height: calc(clamp(38px, 3.4vw, 56px) + 2 * clamp(8px, .7vw, 11px));
  border-radius: clamp(12px, 1.08vw, 16px);
  box-shadow: 0 1px 2px rgba(76, 29, 149, .04), 0 14px 30px -26px rgba(76, 29, 149, .3);
}
#bq-faq .bq-q .bq-ic { left: clamp(10px, .97vw, 14px); top: clamp(8px, .7vw, 11px); transform: none; border-radius: clamp(9px, .9vw, 13px); }
#bq-faq .bq-q > summary > b { padding-top: 0; }
#bq-faq .bq-q > summary:focus-visible { outline: 2px solid #6d28d9; outline-offset: 4px; border-radius: 8px; }
#bq-faq .bq-q .bq-q-x {
  position: absolute; right: clamp(14px, 1.9vw, 30px); top: 50%;
  transform: translateY(-50%); font-size: clamp(12px, 1.05vw, 15px);
}
#bq-faq .bq-q[open] .bq-q-x { transform: translateY(-50%) rotate(180deg); }
#bq-faq .bq-q > p { margin-top: clamp(2px, .25vw, 4px); font-size: clamp(10.5px, .86vw, 12px); line-height: 1.45; }

/* ── «VER MÁS DUDAS» ──────────────────────────────────────────────────────
   Centrado bajo la rejilla, como una ficha más de las de arriba: así se lee
   como «hay más de esto», no como un botón de otra familia. El chevron gira
   cuando ya está desplegado. */
.bq-faq-ver { display: flex; justify-content: center; margin-top: clamp(6px, .62vw, 9px); }
/* Con el boton escondido (una categoria, algo escrito, o sin guion) el
   envoltorio se quedaba vacio y dejaba 8 px de hueco sobre la ayuda. */
.bq-faq-ver:has(> .bq-faq-ver-b[hidden]) { display: none; }
.bq-faq-ver-b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: clamp(5px, .5vw, 7px) clamp(12px, 1.2vw, 16px); border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid #e9e3ff; color: #5b21b6;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .05), 0 12px 26px -20px rgba(76, 29, 149, .45);
  font: inherit; font-size: clamp(11px, .9vw, 12.5px); font-weight: 700;
  transition: border-color .18s ease, background .18s ease;
}
.bq-faq-ver-b > svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s ease; }
.bq-faq-ver-b[aria-expanded="true"] > svg { transform: rotate(180deg); }
.bq-faq-ver-b:hover { border-color: #c9b8f5; background: #faf8ff; }
.bq-faq-ver-b:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; }
/* Igual que con las preguntas: `hidden` a secas lo pisaría el display de la
   regla de arriba. */
.bq-faq-ver-b[hidden] { display: none; }

/* ── «¿TIENES OTRA PREGUNTA?» ─────────────────────────────────────────────
   Sustituye a la caja blanca de hoy bajo la rejilla, que decía lo mismo en su
   propia tarjeta (sus reglas van en la lista de las que se retiran; su nombre
   no se escribe aquí para que la ley que cuenta selectores no lo lea como una
   regla viva). En la maqueta la fila va DENTRO del panel y sin caja: el
   círculo lavanda con los cascos, las dos líneas y el botón relleno. */
.bq-faq-ayuda {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(9px, .95vw, 13px);
}
.bq-faq-ayuda > .bq-ic {
  display: grid; place-items: center; flex: none;
  width: clamp(36px, 3.4vw, 48px); height: clamp(36px, 3.4vw, 48px);
  border-radius: 50%; background: #f3eefd; color: #6d28d9;
}
.bq-faq-ayuda > .bq-ic > svg { width: 50%; height: 50%; }
.bq-faq-ayuda > div { min-width: 0; }
.bq-faq-ayuda b { display: block; font-family: var(--font-display, inherit); font-size: clamp(13px, 1.1vw, 15.5px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.bq-faq-ayuda > div > span { display: block; margin-top: 2px; font-size: clamp(10.5px, .86vw, 12.5px); color: var(--muted); }
/* El botón es VIOLETA como «Buscar» (en la maqueta los dos son 109,40,217),
   no negro como el `.mk-btn-primary` de la casa. Lleva clase propia y no la
   de la casa porque aquélla sube el botón 1 px al pasar el ratón, y eso no
   se puede apagar para quien pide menos movimiento sin pisar a los demás
   botones de la web. Misma pintura que `.bq-faq-busca-b`, con su flecha. */
.bq-faq-ayuda-b {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  margin-left: clamp(4px, .9vw, 14px); padding: clamp(8px, .8vw, 11px) clamp(16px, 1.6vw, 22px);
  border-radius: 999px; background: #6d28d9; color: #fff; text-decoration: none;
  font-size: clamp(12px, 1vw, 13.5px); font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  box-shadow: 0 12px 26px -16px rgba(76, 29, 149, .6);
  transition: background .18s ease;
}
.bq-faq-ayuda-b:hover { background: #5b21b6; color: #fff; }
.bq-faq-ayuda-b:focus-visible { outline: 2px solid #6d28d9; outline-offset: 3px; }
.bq-faq-ayuda-b > svg { width: 1.15em; height: 1.15em; flex: none; }

#bq-faq .bq-faq-cero { margin: 4px 0 0; }

/* A quien pide menos movimiento no se le gira ni se le desliza nada. El
   deslizamiento de aparición (`.reveal`) lo apaga ya site.css; aquí se apaga
   lo que se mueve dentro del bloque: el chevron que gira, los chips y los
   botones que cambian de color, y el botón del buscador, que sube un píxel al
   pasar el ratón por la regla de hoy. El de ayuda no sube: no usa la clase
   de la casa que lo haría. */
@media (prefers-reduced-motion: reduce) {
  #bq-faq .bq-faq-busca-b, #bq-faq .bq-faq-cat, #bq-faq .bq-q .bq-q-x, .bq-faq-ver-b, .bq-faq-ver-b > svg, .bq-faq-ayuda-b { transition: none; }
  #bq-faq .bq-faq-busca-b:hover { transform: none; }
}

/* ── PANTALLAS ESTRECHAS ──────────────────────────────────────────────────
   La rejilla ya cae a una columna por la regla general de `.bq-dos--faq`; en
   una columna las filas vuelven a `auto`: igualarlas a la más alta dejaría
   cada duda corta con el hueco de la más larga. La fila de ayuda se apila. */
@media (max-width: 900px) {
  #bq-faq .bq-dos--faq[data-recorte] { grid-auto-rows: auto; }
}
/* El buscador vuelve al ancho del wrap, como hoy: con el 47,3 % el mínimo del
   clamp (320) mandaba y, con el zoom, quedaba una píldora de 269 de 390. */
@media (max-width: 620px) {
  #bq-faq .bq-faq-busca { max-width: none; padding: 12px; }
  .bq-faq-ayuda { flex-direction: column; text-align: center; }
  .bq-faq-ayuda > div { text-align: center; }
  .bq-faq-ayuda-b { margin-left: 0; }
  .bq-faq-panel { padding: 10px; }
}