/* ============================================================================
 * cx-conocer.css — «Conocer Cuality X»: el recorrido guiado de bienvenida.
 *
 * Es la primera cara del producto para quien llega sin cuenta, así que se viste
 * como la página de la norma (cualityx.com/ISO-9001), no como una ventana del
 * escritorio: fondo propio, tipografía grande y el maestro presidiendo.
 *
 * El retrato (.cu-av*) lo dibuja y lo anima `iso-curso.js`; esto es solo su
 * marco. Las reglas están copiadas de `ISO-9001/venta.css` a propósito: es el
 * MISMO maestro y tiene que verse igual.
 * ========================================================================== */

#cx-conocer {
  position: fixed; inset: 0; z-index: 2147483200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  box-sizing: border-box;
  background: rgba(5, 7, 12, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  animation: cnFade .24s ease both;
}
@keyframes cnFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cnSube { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes cnEntra { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.cn-caja {
  position: relative; width: 100%; max-width: 1080px;
  height: min(86vh, 700px); box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 26px; color: #eaf3ff;
  background: linear-gradient(170deg, #161b28, #0b0e15 70%);
  border: 1px solid rgba(140, 190, 255, .16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
  animation: cnSube .3s cubic-bezier(.16, 1, .3, 1) both;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cn-top {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.cn-top .cn-marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.cn-top .cn-marca img { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.cn-top b { font-size: 14.5px; font-weight: 750; letter-spacing: -.2px; }
.cn-top span { font-size: 11.5px; color: rgba(234, 243, 255, .5); }
.cn-x {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: rgba(234, 243, 255, .6);
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.cn-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── El cuerpo: escena a la izquierda, maestro a la derecha ───────────── */
.cn-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 300px; }

.cn-escena {
  min-width: 0; min-height: 0; overflow-y: auto; padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.cn-eti {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  padding: 4px 11px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  background: rgba(108, 196, 255, .14); color: #6cc4ff;
}
.cn-tit { font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; letter-spacing: -.5px; line-height: 1.18; }
.cn-sub { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(234, 243, 255, .62); }

/* Listas que van apareciendo al ritmo de la voz */
.cn-items { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cn-items li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.5;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.cn-items li.ya { opacity: 1; transform: none; }
.cn-items li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%;
  background: linear-gradient(140deg, #6cc4ff, #2f8ff5);
  box-shadow: 0 0 10px rgba(47, 143, 245, .7);
}

/* La parrilla de apps */
.cn-apps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px; margin-top: 18px;
}
.cn-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  opacity: 0; transform: translateY(10px) scale(.94);
  transition: opacity .35s, transform .35s;
}
.cn-app.ya { opacity: 1; transform: none; }
.cn-app img { width: 42px; height: 42px; border-radius: 12px; display: block; }
.cn-app span { font-size: 10.5px; line-height: 1.25; color: rgba(234, 243, 255, .62); }
.cn-mas { margin-top: 14px; font-size: 12px; color: rgba(234, 243, 255, .45); }

/* Tarjetas (perfiles, almacenamiento, CX Coins) */
.cn-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 18px; }
.cn-tar {
  padding: 14px 15px; border-radius: 15px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(10px); transition: opacity .38s, transform .38s;
}
.cn-tar.ya { opacity: 1; transform: none; }
.cn-tar .cn-ico { font-size: 21px; line-height: 1; }
.cn-tar b { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 750; }
.cn-tar p { margin: 5px 0 0; font-size: 11.8px; line-height: 1.55; color: rgba(234, 243, 255, .58); }

/* Comparativa a dos columnas */
.cn-compara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.cn-col { padding: 14px 15px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, .08); }
.cn-col.mal { background: rgba(255, 90, 90, .06); border-color: rgba(255, 120, 120, .18); }
.cn-col.bien { background: rgba(60, 201, 139, .07); border-color: rgba(60, 201, 139, .22); }
.cn-col h4 { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.cn-col.mal h4 { color: #ff8f8f; }
.cn-col.bien h4 { color: #55d3a0; }
.cn-col div { font-size: 12.5px; line-height: 1.75; color: rgba(234, 243, 255, .72); }

/* Preguntas frecuentes */
.cn-preg { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cn-preg button {
  text-align: left; padding: 11px 14px; border-radius: 13px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #cfe6ff;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(140, 190, 255, .16);
  transition: background .16s, border-color .16s, transform .12s;
}
.cn-preg button:hover { background: rgba(108, 196, 255, .12); border-color: rgba(108, 196, 255, .45); }
.cn-preg button.on { background: rgba(108, 196, 255, .18); border-color: rgba(108, 196, 255, .6); color: #fff; }
.cn-preg button:active { transform: scale(.99); }

/* Preguntar por escrito */
.cn-caja-preg { display: flex; gap: 8px; margin-top: 14px; }
.cn-caja-preg input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(140, 190, 255, .2); background: rgba(255, 255, 255, .05);
  color: #eaf3ff; font-family: inherit; font-size: 13px;
}
.cn-caja-preg input:focus { outline: 2px solid rgba(108, 196, 255, .5); outline-offset: 0; }
.cn-caja-preg button {
  flex: none; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #6cc4ff, #2f8ff5);
}
.cn-caja-preg button:disabled { opacity: .45; cursor: default; }

/* ── La columna del maestro ───────────────────────────────────────────── */
.cn-maestro {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 18px; min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(circle at 50% 12%, rgba(47, 143, 245, .13), transparent 62%);
}
.cn-av { position: relative; width: clamp(104px, 13vh, 132px); aspect-ratio: 1; flex: none; }
#cx-conocer .cu-av-ret {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 2;
  background: radial-gradient(circle at 50% 28%, #1d3550, #0a1018 72%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
#cx-conocer .cu-av-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#cx-conocer .cu-av-halo {
  position: absolute; inset: -5px; border-radius: 50%; opacity: 0; transition: opacity .35s; z-index: 0;
  filter: blur(1.5px); box-shadow: 0 0 34px rgba(47, 143, 245, .6);
  background: conic-gradient(from 0deg, #2f8ff5, #6cc4ff, #fff, #2f8ff5);
}
#cx-conocer .cu-av-onda {
  position: absolute; inset: -8px; border-radius: 50%; opacity: 0; z-index: 1;
  border: 2px solid rgba(108, 196, 255, .55);
}
#cx-conocer .cu-av.cu-av-sonando .cu-av-halo { opacity: 1; animation: cnGira 3s linear infinite; }
#cx-conocer .cu-av.cu-av-sonando .cu-av-onda { animation: cnOnda 2s ease-out infinite; }
#cx-conocer .cu-av-ojos { transform-box: fill-box; transform-origin: center; animation: cnParpadeo 4.6s ease-in-out infinite; }
#cx-conocer .cu-av-labio { transition: opacity .08s; }
#cx-conocer .cu-maestro { width: 100%; height: 100%; display: block; }
@keyframes cnGira { to { transform: rotate(360deg) } }
@keyframes cnOnda { 0% { opacity: .75; transform: scale(1) } 100% { opacity: 0; transform: scale(1.28) } }
@keyframes cnParpadeo { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }

.cn-quien { text-align: center; }
.cn-quien b { display: block; font-size: 13.5px; font-weight: 750; }
.cn-quien i { font-style: normal; font-size: 11px; color: rgba(234, 243, 255, .45); }

.cn-globo {
  flex: 1; width: 100%; min-height: 0; overflow-y: auto;
  padding: 13px 15px; border-radius: 15px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12.8px; line-height: 1.62; color: rgba(234, 243, 255, .88);
}
.cn-globo.esperando::after {
  content: "···"; letter-spacing: 3px; color: rgba(234, 243, 255, .4);
  animation: cnPuntos 1.1s ease-in-out infinite;
}
@keyframes cnPuntos { 50% { opacity: .3 } }

.cn-voz {
  display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
}
.cn-voz button {
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05);
  color: rgba(234, 243, 255, .7); border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; padding: 7px 11px;
}
.cn-voz button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cn-voz button.on { background: rgba(108, 196, 255, .18); border-color: rgba(108, 196, 255, .5); color: #fff; }

/* ── El pie: avance y mandos ──────────────────────────────────────────── */
.cn-pie {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .07);
}
.cn-puntos { display: flex; gap: 5px; flex: 1; min-width: 90px; }
.cn-puntos i {
  width: 22px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .14);
  cursor: pointer; transition: background .3s, width .3s;
}
.cn-puntos i.ya { background: rgba(108, 196, 255, .5); }
.cn-puntos i.on { width: 34px; background: linear-gradient(90deg, #6cc4ff, #2f8ff5); }
.cn-bt {
  padding: 10px 16px; border-radius: 12px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05); color: rgba(234, 243, 255, .75);
}
.cn-bt:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cn-bt.ppal {
  border: 0; color: #fff; background: linear-gradient(140deg, #6cc4ff, #2f8ff5);
  box-shadow: 0 6px 20px rgba(47, 143, 245, .32);
}
.cn-bt:disabled { opacity: .4; cursor: default; }

/* ── El cierre: los botones de cuenta ─────────────────────────────────── */
.cn-final { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; max-width: 360px; }

/* ── Estrecho: el maestro se pone arriba y se encoge ──────────────────── */
@media (max-width: 860px), (max-height: 560px) {
  #cx-conocer { padding: 0; }
  .cn-caja { max-width: none; height: 100%; border-radius: 0; border: 0; }
  .cn-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .cn-maestro {
    flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px;
    border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .cn-av { width: 58px; }
  .cn-quien { display: none; }
  .cn-globo { flex: 1; max-height: 92px; font-size: 12px; padding: 9px 12px; }
  .cn-voz { width: auto; flex: none; }
  .cn-voz button span { display: none; }
  .cn-escena { padding: 18px 16px; justify-content: flex-start; }
  .cn-compara { grid-template-columns: 1fr; }
}

/* ── Lo que se puede tocar ─────────────────────────────────────────────
   Un recorrido que solo se mira se pasa de largo. Estas son las piezas con
   las que la persona juega: los iconos de las apps y la elección de por qué
   está aquí. (24 sep 2026) */
.cn-app {
  border: 1px solid transparent; background: transparent; padding: 8px 4px;
  border-radius: 14px; cursor: pointer; font-family: inherit;
  transition: opacity .35s, transform .18s, background .18s, border-color .18s;
}
.cn-app:hover { background: rgba(108, 196, 255, .1); border-color: rgba(108, 196, 255, .22); }
.cn-app:hover img { transform: translateY(-2px) scale(1.06); }
.cn-app img { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.cn-app:active { transform: scale(.95); }
.cn-app.on { background: rgba(108, 196, 255, .18); border-color: rgba(108, 196, 255, .55); }
.cn-app.on span { color: #eaf3ff; }
.cn-app:focus-visible { outline: 2px solid #6cc4ff; outline-offset: 2px; }

.cn-ops { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; max-width: 460px; }
.cn-op {
  display: flex; align-items: center; gap: 13px; text-align: left; width: 100%;
  padding: 13px 15px; border-radius: 15px; cursor: pointer; font-family: inherit;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  transition: background .18s, border-color .18s, transform .14s;
}
.cn-op:hover { background: rgba(108, 196, 255, .11); border-color: rgba(108, 196, 255, .4); transform: translateX(3px); }
.cn-op:active { transform: scale(.99); }
.cn-op.on { background: rgba(108, 196, 255, .18); border-color: rgba(108, 196, 255, .65); }
.cn-op:focus-visible { outline: 2px solid #6cc4ff; outline-offset: 2px; }
.cn-op-ico { font-size: 25px; line-height: 1; flex: none; }
.cn-op-tx { min-width: 0; }
.cn-op-tx b { display: block; font-size: 14px; font-weight: 750; color: #eaf3ff; }
.cn-op-tx i { font-style: normal; display: block; font-size: 11.5px; margin-top: 2px; color: rgba(234, 243, 255, .55); }

/* Las tarjetas también responden al dedo: si algo se ve tocable, se toca. */
.cn-tar { transition: opacity .38s, transform .38s, background .18s, border-color .18s; }
.cn-tar:hover { background: rgba(255, 255, 255, .07); border-color: rgba(140, 190, 255, .2); }

/* ══ QUE ESTÉ VIVO ══════════════════════════════════════════════════════════
   Una presentación quieta se pasa de largo. Nada de esto es adorno gratuito:
   el fondo se mueve despacio para que la pantalla no parezca congelada, la
   escena entra desde un lado para que se note el cambio de paso, y una línea
   avanza con la voz para que se sepa cuánto queda. (24 sep 2026) */

/* El fondo: dos luces que van y vienen muy despacio. 22 y 30 s a propósito —
   más rápido se nota y distrae de lo que el maestro está contando. */
.cn-escena { position: relative; }
.cn-escena { overflow-x: hidden; }
.cn-escena::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 160% 160%;
  background:
    radial-gradient(420px 320px at 18% 24%, rgba(47,143,245,.16), transparent 64%),
    radial-gradient(360px 300px at 82% 74%, rgba(108,196,255,.11), transparent 64%);
  animation: cnAurora 26s ease-in-out infinite alternate;
}
.cn-escena > * { position: relative; z-index: 1; }
@keyframes cnAurora {
  0%   { background-position: 0% 0%, 100% 100%; }
  50%  { background-position: 60% 30%, 40% 70%; }
  100% { background-position: 20% 80%, 80% 20%; }
}

/* La escena entra desde la derecha al avanzar. Se pone la clase por JS. */
.cn-escena.cn-entra > * { animation: cnDesliza .42s cubic-bezier(.16,1,.3,1) both; }
.cn-escena.cn-entra > *:nth-child(2) { animation-delay: .05s }
.cn-escena.cn-entra > *:nth-child(3) { animation-delay: .1s }
.cn-escena.cn-entra > *:nth-child(4) { animation-delay: .15s }
@keyframes cnDesliza { from { opacity: 0; transform: translateX(26px) } to { opacity: 1; transform: none } }

/* La línea que avanza con la voz, bajo la cabecera */
.cn-linea { height: 2px; background: rgba(255,255,255,.07); flex: none; overflow: hidden; }
.cn-linea i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6cc4ff, #2f8ff5);
  box-shadow: 0 0 10px rgba(47,143,245,.8);
  transition: width .25s linear;
}

/* El título, con un subrayado que se dibuja solo */
.cn-tit { position: relative; display: inline-block; padding-bottom: 6px; }
.cn-tit::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  border-radius: 99px; background: linear-gradient(90deg, #6cc4ff, transparent);
  animation: cnSubraya 1.1s .25s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cnSubraya { to { width: 74px } }

/* La etiqueta, con un brillo que la recorre una vez */
.cn-eti { position: relative; overflow: hidden; }
.cn-eti::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: cnBrillo 1.5s .4s ease-out;
}
@keyframes cnBrillo { to { transform: translateX(120%) } }

/* Los iconos flotan, cada uno a su ritmo: una parrilla quieta parece una foto */
.cn-app.ya img { animation: cnFlota 4.2s ease-in-out infinite; }
.cn-app:nth-child(3n+1) img { animation-delay: -1.4s }
.cn-app:nth-child(3n+2) img { animation-delay: -2.8s }
.cn-app:hover img { animation-play-state: paused; }
@keyframes cnFlota { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* Las viñetas de la lista laten cuando acaban de aparecer */
.cn-items li.ya::before { animation: cnLate 2.6s ease-in-out infinite; }
@keyframes cnLate {
  0%,100% { box-shadow: 0 0 10px rgba(47,143,245,.7) }
  50%     { box-shadow: 0 0 18px rgba(108,196,255,.95) }
}

/* El maestro, cuando habla: su columna se enciende un poco */
.cn-maestro { transition: background .6s; }
.cn-maestro.hablando {
  background: radial-gradient(circle at 50% 12%, rgba(47,143,245,.24), transparent 66%);
}
.cn-globo { transition: border-color .4s, box-shadow .4s; }
.cn-maestro.hablando .cn-globo {
  border-color: rgba(108,196,255,.3);
  box-shadow: 0 0 26px rgba(47,143,245,.14);
}

/* El hueco donde se muda el maestro */
.cn-av-hueco { display: flex; justify-content: center; flex: none; }
#cx-conocer .cn-av { width: clamp(112px, 14vh, 142px); }

/* Los botones principales, con un latido suave que invita a pulsarlos */
.cn-bt.ppal { animation: cnInvita 3.4s ease-in-out infinite; }
.cn-bt.ppal:hover { animation-play-state: paused; }
@keyframes cnInvita {
  0%,100% { box-shadow: 0 6px 20px rgba(47,143,245,.32) }
  50%     { box-shadow: 0 8px 30px rgba(47,143,245,.55) }
}

/* Quien pide menos movimiento, menos movimiento tiene. */
@media (prefers-reduced-motion: reduce) {
  .cn-escena::before, .cn-app.ya img, .cn-items li.ya::before,
  .cn-bt.ppal, .cn-eti::after, .cn-tit::after { animation: none !important; }
  .cn-escena.cn-entra > * { animation-duration: .01s !important; }
  .cn-tit::after { width: 74px; }
}

/* ── Pensando ── Mientras el guía busca la respuesta a una pregunta escrita, se
   nota: la cara se balancea despacio, el halo respira y el globo parpadea. Sin
   esto había hasta quince segundos con un maestro inmóvil. (24 sep 2026) */
.cn-maestro.pensando .cu-av { animation: cnPiensa 1.6s ease-in-out infinite; }
.cn-maestro.pensando .cu-av-halo { opacity: .55 !important; animation: cnRespira 1.6s ease-in-out infinite; }
.cn-maestro.pensando .cn-globo { animation: cnGloboPiensa 1.6s ease-in-out infinite; }
.cn-maestro.pensando .cn-globo::after { animation-duration: .7s; }
@keyframes cnPiensa { 0%,100% { transform: rotate(-2deg) translateY(0) } 50% { transform: rotate(2deg) translateY(-3px) } }
@keyframes cnRespira { 0%,100% { transform: scale(1); opacity: .35 } 50% { transform: scale(1.06); opacity: .7 } }
@keyframes cnGloboPiensa { 0%,100% { border-color: rgba(108,196,255,.18) } 50% { border-color: rgba(108,196,255,.55) } }
@media (prefers-reduced-motion: reduce) { .cn-maestro.pensando .cu-av, .cn-maestro.pensando .cu-av-halo, .cn-maestro.pensando .cn-globo { animation: none !important; } }

/* ── «Esto es lo que te voy a enseñar» ── aparece al elegir qué te trae. */
.cn-muestra { margin-top: 18px; padding: 14px 16px; border-radius: 15px;
  background: rgba(108,196,255,.08); border: 1px solid rgba(108,196,255,.26); max-width: 460px; }
.cn-muestra[hidden] { display: none; }
.cn-muestra-tit { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #6cc4ff; }
.cn-muestra .cn-items { margin-top: 8px; gap: 7px; }
.cn-muestra .cn-items li { font-size: 13px; }
.cn-muestra.cn-entra { animation: cnDesliza .42s cubic-bezier(.16,1,.3,1) both; }
/* Con cuatro opciones la lista crece: dos columnas cuando hay sitio */
@media (min-width: 900px) { .cn-ops { display: grid; grid-template-columns: 1fr 1fr; max-width: 600px; } }

/* ── Las dos formas de pagar, lado a lado ── */
.cn-pago { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.cn-pago .cn-tar.todo { background: linear-gradient(135deg, rgba(47, 143, 245, .16), rgba(108, 196, 255, .05)); border-color: rgba(108, 196, 255, .42); }
.cn-pago-cab { display: flex; align-items: center; gap: 11px; }
.cn-pago-cab .cn-ico { font-size: 24px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); flex: none; }
.cn-pago .cn-tar.todo .cn-pago-cab .cn-ico { background: linear-gradient(135deg, #2f8ff5, #6cc4ff); box-shadow: 0 8px 20px rgba(47, 143, 245, .35); }
.cn-pago-cab b { display: block; margin: 0; font-size: 14px; font-weight: 800; }
.cn-pago-cab i { font-style: normal; display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: #6cc4ff; }
.cn-pago .cn-tar ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cn-pago .cn-tar li { position: relative; padding-left: 17px; font-size: 12.3px; line-height: 1.5; color: rgba(234, 243, 255, .72); }
.cn-pago .cn-tar li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #55d3a0; font-weight: 800; }
.cn-pago + .cn-mas { margin-top: 12px; }
@media (max-width: 640px) { .cn-pago { grid-template-columns: 1fr; } }