@property --acento {
  syntax: '<color>'; inherits: true; initial-value: #8B7CFF;
}
@property --halo {
  syntax: '<color>'; inherits: true; initial-value: #5C73FF;
}

/* ==========================================================================
   Catálogo de productos — escena oscura
   Se carga en la home y en /productos. El marcado lo genera
   tools/generar-catalogo.mjs; aquí solo vive la presentación.
   ========================================================================== */
.cat {
  --cat-fondo-a: #08090D;
  --cat-fondo-b: #101014;
  --cat-texto: #F6F5FB;
  --cat-linea: rgba(255,255,255,.12);
  --cat-apagado: rgba(246,245,251,.46);
  --cat-marco: #0F1015;
  --cat-menta: #46E2C0;

  background: linear-gradient(180deg, var(--cat-fondo-a) 0%, var(--cat-fondo-b) 100%);
  color: var(--cat-texto);
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
  isolation: isolate;
  transition: --acento .55s var(--ease-out), --halo .55s var(--ease-out);
}
.cat-escena { transition: --acento .55s var(--ease-out), --halo .55s var(--ease-out); }
.cat-inner { max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); }

.cat-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.cat-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(246,245,251,.5); margin-bottom: clamp(24px, 3vw, 38px);
}

.cat-grid {
  display: grid; grid-template-columns: 43fr 57fr;
  gap: clamp(40px, 4vw, 64px); align-items: start;
}

/* --------------------------------------------------------------------------
   Lista de productos
   -------------------------------------------------------------------------- */
.cat-fila { border-top: 1px solid var(--cat-linea); }
.cat-fila:last-child { border-bottom: 1px solid var(--cat-linea); }
.cat-h { margin: 0; }

.cat-btn {
  width: 100%; display: grid; grid-template-columns: 30px 1fr 22px;
  align-items: center; gap: 10px; padding: clamp(12px, 1.5vw, 18px) 0;
  text-align: left; cursor: pointer; color: inherit;
}
.cat-num {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; color: rgba(246,245,251,.32);
  transition: color .35s var(--ease-out);
  align-self: start; padding-top: .55em;
}
.cat-nombre {
  font-family: 'Archivo Condensed', 'Space Grotesk', sans-serif;
  font-weight: 700; font-stretch: 62.5%;
  font-size: clamp(38px, 4.1vw, 62px); line-height: .98;
  letter-spacing: .005em; text-transform: uppercase;
  color: var(--cat-apagado);
  transition: color .4s var(--ease-out), text-shadow .5s var(--ease-out);
  overflow-wrap: break-word;
}
.cat-flecha {
  width: 18px; height: 18px; color: var(--acento); opacity: 0;
  transition: opacity .3s ease, transform .35s var(--ease-out);
  transform: translateX(-4px);
}

@media (hover: hover) and (pointer: fine) {
  .cat-btn:hover .cat-nombre { color: rgba(246,245,251,.78); }
  .cat-btn:hover .cat-num { color: rgba(246,245,251,.55); }
  .cat-btn:hover .cat-flecha { opacity: .55; transform: translateX(0); }
}
.cat-btn:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 6px;
}

.cat-fila.is-activa .cat-nombre {
  color: var(--acento);
  text-shadow: 0 0 32px color-mix(in srgb, var(--acento) 45%, transparent);
}
.cat-fila.is-activa .cat-num { color: var(--acento); }
.cat-fila.is-activa .cat-flecha { opacity: 1; transform: translateX(0); }

/* El panel se anima por altura desde JS; sin JS queda simplemente visible. */
.cat-p { overflow: hidden; }
.cat-p-in { padding-bottom: clamp(14px, 1.6vw, 20px); padding-left: 40px; }
.cat-desc {
  font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55;
  color: rgba(246,245,251,.8); max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Escenario
   -------------------------------------------------------------------------- */
.cat-col-escena { position: relative; }
.cat-escena { position: relative; perspective: 1400px; }

.cat-halo {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: 168%; aspect-ratio: 1 / .82; z-index: 0; pointer-events: none;
  /* Sin filter: blur(). Un degradado radial con paradas suaves ya se ve difuso
     y no obliga al navegador a rasterizar un búfer aparte en cada fotograma. */
  background:
    radial-gradient(50% 50% at 50% 50%,
      color-mix(in srgb, var(--halo) 78%, transparent) 0%,
      color-mix(in srgb, var(--halo) 46%, transparent) 26%,
      color-mix(in srgb, var(--halo) 16%, transparent) 52%,
      transparent 76%),
    radial-gradient(38% 42% at 50% 46%,
      color-mix(in srgb, var(--acento) 62%, transparent) 0%,
      color-mix(in srgb, var(--acento) 24%, transparent) 44%,
      transparent 72%);
  opacity: .92;
}

.cat-marco {
  position: relative; z-index: 1;
  border-radius: 20px; overflow: hidden;
  background: var(--cat-marco);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-out);
}
.cat-barra {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px; height: 38px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}
.cat-puntos { display: flex; gap: 6px; }
.cat-puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.cat-ventana {
  font-family: var(--font-body); font-weight: 500; font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(246,245,251,.45);
}

.cat-pantalla {
  position: relative; aspect-ratio: 16 / 9; background: #0B0C10;
  container-type: inline-size; container-name: pantalla;
}
.cat-vis {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
}
.cat-vis[hidden] { display: none; }
.cat-vis > picture, .cat-vis > picture img, .cat-video {
  width: 100%; height: 100%; object-fit: contain;
}

/* Botón de pausa del vídeo */
.cat-video-btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,11,16,.72); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, transform .25s var(--ease-out);
}
.cat-video-btn:hover { background: rgba(10,11,16,.92); transform: scale(1.06); }
.cat-video-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.cat-video-btn svg { width: 15px; height: 15px; fill: currentColor; }
.cat-video-btn .cat-icono-play { display: none; }
.cat-video-btn[data-estado="pausado"] .cat-icono-pausa { display: none; }
.cat-video-btn[data-estado="pausado"] .cat-icono-play { display: block; }

.cat-ampliar {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  font-size: 12px; font-weight: 500; color: rgba(246,245,251,.85);
  padding: 7px 13px; border-radius: 100px;
  background: rgba(10,11,16,.66); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s ease, background .25s ease;
}
.cat-marco:hover .cat-ampliar,
.cat-ampliar:focus-visible { opacity: 1; }
.cat-ampliar:hover { background: rgba(10,11,16,.9); }
.cat-ampliar:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Brillo que sigue al puntero. Nunca blanquea el contenido. */
.cat-brillo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(
    circle 42% at var(--bx, 50%) var(--by, 50%),
    rgba(255,255,255,.10) 0%, transparent 62%);
  transition: opacity .45s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Etiquetas y acciones bajo el escenario
   -------------------------------------------------------------------------- */
.cat-info { margin-top: clamp(18px, 2vw, 26px); }
.cat-info-item[hidden] { display: none; }
.cat-cat {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246,245,251,.4); margin-bottom: 12px;
}
.cat-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cat-tags li {
  font-size: 12.5px; font-weight: 500; color: rgba(246,245,251,.75);
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.03);
}
.cat-nota {
  font-size: 12.5px; color: rgba(246,245,251,.45); margin: -6px 0 18px; max-width: 52ch; line-height: 1.5;
}
.cat-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cat-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 14px 24px; border-radius: 100px;
  background: var(--acento); color: #0A0B10;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .25s ease;
}
.cat-cta .cat-flecha { opacity: 1; transform: none; color: currentColor; width: 15px; height: 15px; }
.cat-cta:hover {
  transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--acento) 75%, transparent);
}
.cat-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cat-cta2 {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500; color: rgba(246,245,251,.8);
  padding: 13px 20px; border-radius: 100px; border: 1px solid rgba(255,255,255,.16);
  transition: border-color .25s ease, color .25s ease, transform .3s var(--ease-out);
}
.cat-cta2 svg { width: 13px; height: 13px; }
.cat-cta2:hover { color: #fff; border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.cat-cta2:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Demo del agente — marca Valyon (superficie clara, Ion violeta)
   Escala con el ancho del contenedor para que el texto guarde siempre la misma
   proporción respecto al marco, igual que hacen las capturas.
   -------------------------------------------------------------------------- */
.ag {
  position: absolute; inset: 0; display: grid; grid-template-columns: 27% 1fr;
  background: #FBFBFD; color: #16171A; text-align: left;
  font-size: 1.55cqi;
}
.ag-lado {
  border-right: 1px solid #E9E8F2; padding: 2.2cqi 1.6cqi;
  display: flex; flex-direction: column; gap: 1cqi; min-width: 0;
}
.ag-lado-cab {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 1.5cqi; color: #16171A; margin-bottom: .6cqi;
}
.ag-nueva { color: var(--ion); font-weight: 600; font-size: 1.35cqi; }
.ag-conv {
  padding: 1.1cqi 1.2cqi; border-radius: .9cqi; background: #fff;
  border: 1px solid #EDECF5; display: flex; flex-direction: column; gap: .25cqi;
}
.ag-conv--activa { background: var(--ion-tint); border-color: color-mix(in srgb, var(--ion) 28%, transparent); }
.ag-conv strong { font-weight: 500; font-size: 1.4cqi; color: #16171A; }
.ag-conv small { font-size: 1.2cqi; color: #9A9AA4; }

.ag-chat { display: flex; flex-direction: column; padding: 2.2cqi 2.4cqi 1.8cqi; min-width: 0; }
.ag-hilo { flex: 1; display: flex; flex-direction: column; gap: 1.5cqi; min-height: 0; }

.ag-msg { display: flex; gap: 1.1cqi; }
.ag-msg--usuario { justify-content: flex-end; }
.ag-msg--usuario p {
  background: #16171A; color: #fff; padding: 1.3cqi 1.6cqi;
  border-radius: 1.4cqi 1.4cqi .4cqi 1.4cqi; max-width: 78%;
  font-size: 1.5cqi; line-height: 1.45;
}
.ag-avatar {
  flex: none; width: 2.9cqi; height: 2.9cqi; border-radius: 50%;
  background: var(--ion-tint); position: relative;
}
.ag-avatar::before, .ag-avatar::after {
  content: ''; position: absolute; border-radius: 50%; left: 50%; top: 50%; translate: -50% -50%;
}
.ag-avatar::before { width: 58%; height: 58%; border: .34cqi solid var(--ion); }
.ag-avatar::after { width: 20%; height: 20%; background: var(--ion); }

.ag-burbuja { min-width: 0; flex: 1; }
.ag-burbuja > p { font-size: 1.5cqi; line-height: 1.45; margin-bottom: 1.2cqi; }
.ag-burbuja strong { font-weight: 600; }

.ag-tarjeta {
  border: 1px solid #E9E8F2; border-radius: 1.2cqi; padding: 1.6cqi 1.8cqi;
  background: #fff; max-width: 92%;
}
.ag-tarjeta-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1cqi;
  padding-bottom: 1.1cqi; margin-bottom: 1.1cqi; border-bottom: 1px solid #EDECF5;
}
.ag-tarjeta-cab strong { font-family: var(--font-display); font-weight: 500; font-size: 1.85cqi; }
.ag-tarjeta-cab span { font-size: 1.3cqi; color: #9A9AA4; }
.ag-datos, .ag-montos { display: flex; flex-direction: column; gap: .55cqi; }
.ag-datos > div, .ag-montos > div { display: flex; gap: 1cqi; font-size: 1.4cqi; }
.ag-datos dt, .ag-montos dt { color: #6E6E7A; min-width: 12cqi; }
.ag-datos dd, .ag-montos dd { color: #16171A; font-weight: 500; }
.ag-montos {
  margin-top: 1.1cqi; padding-top: 1.1cqi; border-top: 1px solid #EDECF5;
}
.ag-montos .ag-total dt, .ag-montos .ag-total dd {
  font-weight: 600; color: #16171A; font-size: 1.55cqi;
}
.ag-chips { display: flex; flex-wrap: wrap; gap: .7cqi; margin-top: 1.3cqi; }
.ag-chip {
  font-size: 1.2cqi; font-weight: 500; padding: .55cqi 1.1cqi; border-radius: 100px;
  background: #E8F7EF; color: #1E7A4D;
}
.ag-chip::before { content: '✓ '; }

.ag-escribiendo { display: flex; align-items: center; gap: 1.1cqi; }
.ag-puntos { display: inline-flex; gap: .45cqi; }
.ag-puntos i { width: .65cqi; height: .65cqi; border-radius: 50%; background: #B7B6C6; }
.ag-escribiendo-txt { font-size: 1.35cqi; color: #8A8A96; }

.ag-input {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.6cqi; padding: 1.2cqi 1.4cqi; border-radius: 1cqi;
  border: 1px solid #E4E3EF; background: #fff;
}
.ag-input-txt { font-size: 1.4cqi; color: #A3A3AE; }
.ag-enviar {
  width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: var(--ion); position: relative;
}
.ag-enviar::after {
  content: ''; position: absolute; left: 50%; top: 52%; translate: -50% -50%;
  width: .8cqi; height: .8cqi; border-top: .3cqi solid #fff; border-right: .3cqi solid #fff;
  rotate: -45deg;
}

/* Estados de la secuencia (los aplica productos.js) */
.ag[data-fase] [data-paso] { transition: opacity .32s var(--ease-out), transform .32s var(--ease-out); }
.ag[data-fase="0"] [data-paso="peticion"],
.ag[data-fase="0"] [data-paso="escribiendo"],
.ag[data-fase="0"] [data-paso="respuesta"],
.ag[data-fase="1"] [data-paso="escribiendo"],
.ag[data-fase="1"] [data-paso="respuesta"],
.ag[data-fase="2"] [data-paso="respuesta"] { opacity: 0; transform: translateY(.8cqi); pointer-events: none; }
.ag[data-fase="0"] [data-paso="peticion"] { position: absolute; visibility: hidden; }
.ag[data-fase="3"] [data-paso="escribiendo"],
.ag[data-fase="4"] [data-paso="escribiendo"] { display: none; }
.ag[data-fase="3"] [data-paso="chips"] { opacity: 0; }

/* --------------------------------------------------------------------------
   Demo de automatizaciones
   -------------------------------------------------------------------------- */
.au {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  padding: 4cqi 8cqi; background: #0A0B10; font-size: 1.55cqi; text-align: left;
}
.au-tarjeta {
  width: 100%; display: flex; align-items: flex-start; gap: 2cqi;
  padding: 2.2cqi 2.4cqi; border-radius: 1.8cqi;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.au-tarjeta--banco { box-shadow: 0 0 46px -12px color-mix(in srgb, var(--halo) 60%, transparent); }
.au-tarjeta--valyon { box-shadow: 0 0 46px -12px color-mix(in srgb, var(--cat-menta) 45%, transparent); }
.au-ico {
  flex: none; width: 5.6cqi; height: 5.6cqi; border-radius: 1.4cqi;
  display: grid; place-items: center; color: #fff;
}
.au-ico svg { width: 62%; height: 62%; }
.au-ico--banco { background: linear-gradient(150deg, #2E6BE6, #1E4FBF); }
.au-ico--valyon { background: linear-gradient(150deg, #6B62F5, var(--ion)); }
.au-txt { flex: 1; min-width: 0; }
.au-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqi; }
.au-app { font-weight: 500; font-size: 1.5cqi; color: rgba(246,245,251,.9); }
.au-hora { font-size: 1.3cqi; color: rgba(246,245,251,.4); }
.au-tit {
  font-family: var(--font-display); font-weight: 500; font-size: 2.3cqi;
  color: #fff; margin-top: .5cqi; line-height: 1.2;
}
.au-monto {
  font-family: var(--font-display); font-weight: 600; font-size: 2.5cqi;
  color: var(--ion-light); margin-top: .5cqi;
}
.au-meta { font-size: 1.4cqi; color: rgba(246,245,251,.45); margin-top: .35cqi; }

.au-enlace { display: flex; align-items: center; gap: 1.4cqi; align-self: flex-start; padding-left: 4cqi; }
.au-linea { width: 16cqi; height: 6cqi; color: var(--acento); overflow: visible; }
.au-trazo { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .5; }
.au-viajero { opacity: 0; }
.au-enlace-txt { font-size: 1.4cqi; color: rgba(246,245,251,.55); }

.au-ok {
  position: absolute; right: 2.4cqi; bottom: 2.2cqi;
  display: inline-flex; align-items: center; gap: .8cqi;
  font-size: 1.4cqi; font-weight: 500; color: var(--cat-menta);
  padding: .9cqi 1.5cqi; border-radius: 100px;
  background: color-mix(in srgb, var(--cat-menta) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-menta) 32%, transparent);
}
.au-ok svg { width: 1.6cqi; height: 1.6cqi; }

.au[data-fase] > *, .au [data-paso] { transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.au[data-fase="0"] [data-paso="banco"],
.au[data-fase="0"] [data-paso="enlace"],
.au[data-fase="0"] [data-paso="valyon"],
.au[data-fase="1"] [data-paso="enlace"],
.au[data-fase="1"] [data-paso="valyon"],
.au[data-fase="2"] [data-paso="valyon"] { opacity: 0; transform: translateY(1.2cqi); }
.au[data-fase="0"] [data-paso="ok"],
.au[data-fase="1"] [data-paso="ok"],
.au[data-fase="2"] [data-paso="ok"],
.au[data-fase="3"] [data-paso="ok"] { opacity: 0; transform: scale(.9); }

/* Botón «Repetir demo», común a las dos demos */
.cat-repetir {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: rgba(246,245,251,.8);
  padding: 7px 13px; border-radius: 100px;
  background: rgba(10,11,16,.66); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, color .25s ease;
}
.cat-repetir:hover { background: rgba(10,11,16,.9); color: #fff; }
.cat-repetir:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.cat-repetir svg { width: 13px; height: 13px; }

.cat-demo-sello {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(246,245,251,.5);
  padding: 6px 12px; border-radius: 100px;
  background: rgba(10,11,16,.6); border: 1px solid rgba(255,255,255,.1);
}

/* --------------------------------------------------------------------------
   Modal de vista ampliada
   -------------------------------------------------------------------------- */
.cat-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; }
.cat-modal[hidden] { display: none; }
.cat-modal-fondo { position: absolute; inset: 0; background: rgba(6,7,11,.82); backdrop-filter: blur(6px); }
.cat-modal-caja {
  position: relative; width: min(1200px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--cat-marco); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; overflow: hidden; color: var(--cat-texto);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.9);
}
.cat-modal-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.cat-modal-cab h3 { font-size: 15px; color: var(--cat-texto); font-weight: 500; }
.cat-modal-x {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(246,245,251,.75); border: 1px solid rgba(255,255,255,.14);
  transition: background .2s ease, color .2s ease;
}
.cat-modal-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.cat-modal-x:focus-visible { outline: 2px solid var(--ion-light); outline-offset: 3px; }
.cat-modal-x svg { width: 15px; height: 15px; }
.cat-modal-cuerpo { overflow: auto; -webkit-overflow-scrolling: touch; background: #0B0C10; }
.cat-modal-cuerpo img { width: 100%; height: auto; display: block; }
.cat-modal-pie {
  padding: 11px 18px; font-size: 12px; color: rgba(246,245,251,.45);
  border-top: 1px solid rgba(255,255,255,.08);
}
body.cat-modal-abierto { overflow: hidden; }

/* --------------------------------------------------------------------------
   Tablet y móvil: el escenario baja bajo la descripción del producto activo
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .cat-grid { grid-template-columns: 1fr; gap: 0; }
  .cat-col-escena:empty { display: none; }
  .cat-p-in { padding-left: 0; }
  .cat-btn { grid-template-columns: 26px 1fr 20px; }
  .cat-nombre { font-size: clamp(34px, 8.4vw, 52px); }
  .cat-slot .cat-escena { margin: 18px 0 26px; }
  .cat-halo { opacity: .8; width: 150%; }
  .cat-ampliar { opacity: 1; }
}

@media (max-width: 560px) {
  .cat-nombre { font-size: clamp(30px, 9.2vw, 44px); }
  .cat-btn { grid-template-columns: 22px 1fr 18px; gap: 8px; }
  .cat-desc { font-size: 15px; }
  .ag { grid-template-columns: 1fr; }
  .ag-lado { display: none; }
  .ag { font-size: 2.4cqi; }
  .ag-chat { padding: 3cqi; }
  .au { padding: 4cqi 5cqi; }
  .cat-tags li { font-size: 12px; padding: 6px 11px; }
  .cat-cta, .cat-cta2 { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido: sin inclinación, sin recorridos, estados finales
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cat-marco { transition: none !important; transform: none !important; }
  .cat-brillo { display: none; }
  .cat-halo { transition: none; }
  .ag [data-paso], .au [data-paso] { transition: none !important; }
  .cat-repetir { display: none; }
}

/* Sin JavaScript el catálogo sigue siendo legible: todo el contenido está en el HTML. */
.cat-sin-js .cat-p[hidden] { display: block; }

/* ==========================================================================
   Página /productos — cabecera oscura
   ========================================================================== */
body.pagina-oscura { background: #08090D; }

/* Navegación sobre fondo oscuro */
.nav--oscura .logo-word-main { color: #fff; }
.nav--oscura .logo-word-sub { color: rgba(246,245,251,.55); }
.nav--oscura .logo-symbol { color: var(--ion-light); }
.nav--oscura .nav-links a,
.nav--oscura .nav-drop-btn { color: rgba(246,245,251,.72); }
.nav--oscura .nav-links a:hover,
.nav--oscura .nav-drop:hover .nav-drop-btn,
.nav--oscura .nav-drop-btn[aria-expanded="true"] { color: #fff; }
.nav--oscura .nav-links a::after,
.nav--oscura .nav-drop-btn::after { background: var(--ion-light); }
.nav--oscura .nav-toggle span { background: #fff; }
.nav--oscura.is-scrolled {
  background: rgba(10,11,16,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}

/* El desplegable se mantiene claro: es una superficie propia, no el fondo. */
.nav--oscura .nav-mobile { background: #0F1015; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.nav--oscura .nav-mobile a { color: rgba(246,245,251,.85); border-bottom-color: rgba(255,255,255,.09); }
.nav--oscura .nav-movil-grupo { border-bottom-color: rgba(255,255,255,.09); }
.nav--oscura .nav-movil-btn { color: #fff; }
.nav--oscura .nav-movil-sub a { border-left-color: rgba(255,255,255,.16); color: rgba(246,245,251,.7); }
.nav--oscura .nav-movil-sub a:hover { color: var(--ion-light); border-color: var(--ion-light); }

/* Intro compacta: no debe empujar el catálogo fuera de la primera pantalla. */
.prod-intro {
  background: #08090D; color: var(--white);
  padding: calc(var(--nav-h) + clamp(28px, 4vw, 52px)) 0 0;
}
.prod-migas {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: rgba(246,245,251,.42); margin-bottom: 18px;
}
.prod-migas a { color: rgba(246,245,251,.62); transition: color .2s ease; }
.prod-migas a:hover { color: var(--ion-light); }
.prod-titulo {
  font-family: var(--font-display); font-weight: 500; color: #fff;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.015em;
  margin-bottom: 14px;
}
.prod-acento { color: var(--ion-light); }
.prod-lead {
  font-size: clamp(15px, 1.15vw, 17.5px); color: rgba(246,245,251,.66);
  max-width: 54ch; line-height: 1.55;
}

/* El catálogo va justo debajo de la intro, sin doble respiro. */
.prod-intro + .cat { padding-top: clamp(34px, 4vw, 54px); }

/* Cierre */
.prod-cierre { background: #101014; padding: clamp(52px, 6vw, 84px) 0; }
.prod-cierre-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 28px;
}
.prod-cierre-tit {
  font-family: var(--font-display); font-weight: 500; color: #fff;
  font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 10px; letter-spacing: -.01em;
}
.prod-cierre-sub { font-size: 16px; color: rgba(246,245,251,.62); max-width: 52ch; line-height: 1.55; }

@media (max-width: 720px) {
  .prod-cierre-inner .btn { width: 100%; justify-content: center; }
}

/* Intro en dos columnas: el catálogo tiene que caber en la primera pantalla. */
.prod-intro { padding-top: calc(var(--nav-h) + clamp(18px, 2.2vw, 30px)); }
.prod-intro-fila {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.prod-titulo { font-size: clamp(26px, 2.9vw, 40px); margin-bottom: 0; }
.prod-lead { font-size: clamp(14.5px, 1.05vw, 16.5px); max-width: 46ch; padding-bottom: 3px; }
.prod-intro + .cat { padding-top: clamp(26px, 2.8vw, 38px); }

@media (max-width: 860px) {
  .prod-intro-fila { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .prod-titulo { font-size: clamp(26px, 6.4vw, 36px); }
}


/* En táctil el botón de ampliar está siempre visible: lo llevamos a la esquina
   inferior, que en ambas capturas es la zona con menos contenido. */
@media (max-width: 980px) {
  .cat-ampliar { top: auto; bottom: 10px; right: 10px; font-size: 11.5px; padding: 6px 11px; }
}

/* --------------------------------------------------------------------------
   Móvil: las demos son HTML y a 16/9 su texto queda diminuto. Se les permite
   crecer para conservar legibilidad; imágenes y vídeo mantienen su proporción.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .cat-pantalla[data-tipo="demo"] { aspect-ratio: auto; }
  .cat-pantalla[data-tipo="demo"] .cat-vis:not([hidden]) { position: relative; }
  .cat-pantalla[data-tipo="demo"] .ag,
  .cat-pantalla[data-tipo="demo"] .au { position: relative; inset: auto; }

  .ag { font-size: 12.5px; }
  .ag-chat { padding: 14px 14px 18px; }
  .ag-hilo { gap: 10px; }
  .ag-msg--usuario p { font-size: 12.5px; padding: 9px 11px; border-radius: 12px 12px 4px 12px; max-width: 88%; }
  .ag-avatar { width: 20px; height: 20px; }
  .ag-avatar::before { border-width: 2px; }
  .ag-burbuja > p { font-size: 12.5px; margin-bottom: 9px; }
  .ag-tarjeta { padding: 12px 13px; border-radius: 10px; max-width: 100%; }
  .ag-tarjeta-cab strong { font-size: 14px; }
  .ag-tarjeta-cab span { font-size: 11px; }
  .ag-datos > div, .ag-montos > div { font-size: 11.5px; gap: 8px; }
  .ag-datos dt, .ag-montos dt { min-width: 82px; }
  .ag-montos .ag-total dt, .ag-montos .ag-total dd { font-size: 12.5px; }
  .ag-chip { font-size: 10.5px; padding: 4px 9px; }
  .ag-input { margin-top: 12px; padding: 9px 11px; border-radius: 9px; }
  .ag-input-txt { font-size: 12px; }
  .ag-enviar { width: 20px; height: 20px; }
  .ag-enviar::after { width: 6px; height: 6px; border-width: 2px; }

  .au { font-size: 12.5px; padding: 20px 16px; gap: 0; }
  .au-tarjeta { padding: 14px 15px; border-radius: 14px; gap: 12px; }
  .au-ico { width: 38px; height: 38px; border-radius: 11px; }
  .au-app { font-size: 12.5px; }
  .au-hora { font-size: 11px; }
  .au-tit { font-size: 15px; }
  .au-monto { font-size: 16px; }
  .au-meta { font-size: 11.5px; }
  .au-enlace { padding-left: 22px; gap: 10px; }
  .au-linea { width: 78px; height: 34px; }
  .au-enlace-txt { font-size: 11.5px; }
  .au-ok { position: static; margin-top: 10px; align-self: flex-start; font-size: 11.5px; padding: 6px 11px; }
  .au-tarjeta--valyon { flex-wrap: wrap; }

  /* Los controles del marco no deben tapar el contenido de la demo. */
  .cat-repetir, .cat-demo-sello { font-size: 10.5px; padding: 5px 10px; }
  .cat-repetir svg { width: 11px; height: 11px; }
  .cat-pantalla[data-tipo="demo"] .cat-repetir,
  .cat-pantalla[data-tipo="demo"] .cat-demo-sello { position: static; }
  .cat-pantalla[data-tipo="demo"] .cat-vis:not([hidden]) {
    display: flex; flex-direction: column; align-items: stretch;
  }
  .cat-pantalla[data-tipo="demo"] .cat-vis > .cat-repetir,
  .cat-pantalla[data-tipo="demo"] .cat-vis > .cat-demo-sello {
    align-self: flex-start; margin: 0 12px 12px;
  }
  .cat-pantalla[data-tipo="demo"] .cat-vis > .cat-demo-sello { align-self: flex-end; margin-top: -34px; }
}