/* ────────────────────────────────────────────────────────────
   HERO CÓMIC — reemplaza el video del hero por una historieta animada
   (crossfade + Ken Burns sutil: cada página funde con la siguiente y
   tiene un leve scale mientras está activa). Orquestado con JS mínimo
   (ver desdoblamiento.js) porque necesita: avance pausado, detenerse en
   la última página y controles manuales — cosas que un @keyframes puro
   no puede resolver de forma prolija. Compartido por individual.html
   e institucional.html. No toca styles.css.
   ──────────────────────────────────────────────────────────── */

/* Texto más nítido (el resto del sitio no lo tiene definido; se limita
   a estas dos páginas porque este archivo solo lo cargan ellas). */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sin caja: nada de fondo, sombra ni borde propios — las viñetas quedan
   directamente sobre el fondo de la página, como pegatinas sueltas. */
.comic-flipbook {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: transparent;
}

.comic-page {
  position: absolute; inset: 0;
  overflow: hidden; /* recorta el leve desborde del Ken Burns sin agregar caja visible */
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.comic-page.is-active { opacity: 1; pointer-events: auto; z-index: 2; }

/* Al avanzar, la página que se revela tarda un poco más en fundir
   (delay y duración mayores) que cuando se vuelve a tapar al retroceder. */
.comic-page.is-revealing { transition: opacity 1.15s ease 0.15s; }

.comic-page img {
  width: 100%; height: 100%;
  object-fit: cover; /* paneles sólidos: sin transparencia que disimule franjas, llenan el recuadro */
  display: block;
  user-select: none;
  pointer-events: none;
  transform: scale(1);
}
/* Ken Burns: scale muy sutil mientras la página está activa, ~5s (ver
   HOLD_MS en desdoblamiento.js). La clase la reaplica el JS en cada
   cambio de página para reiniciar la animación desde cero. */
.comic-page.is-active img { animation: comicKenBurns 5s ease-out forwards; }
@keyframes comicKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* Controles: mismo lenguaje visual que el resto del sitio (icon-box:
   fondo celeste tenue, borde sutil, ícono azul — igual que los íconos
   de las cards). Van debajo de las viñetas, no encima. */
.comic-controls {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 14px;
}
.comic-nav {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-glow);
  border: 1px solid var(--border);
  color: var(--blue-accent);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease), opacity 0.2s;
}
.comic-nav:hover { border-color: var(--blue-accent); background: rgba(58,142,246,0.22); color: var(--blue-bright); }
.comic-nav:disabled { opacity: 0.35; pointer-events: none; }

/* Visual de la card "Evolución de la información" (sección Qué productos,
   institucional.html): líneas temporales paralelas por carril, con un
   cruce entre dos carriles y una ramificación nueva sobre el final —
   inspirado en el ejemplo real (Network Temporal Evolution). Nuevo — no
   existía un componente equivalente en la landing — pero reutiliza la
   paleta de acentos y el keyframe nodePulse (definido en styles.css) que
   ya usa el resto de los gráficos animados del sitio. */
.evo-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.evo-tick { font-family: var(--font); font-size: 10px; fill: rgba(200,215,240,0.5); text-anchor: middle; }

.evo-lane { fill: none; stroke-width: 2; stroke-linecap: round; }
.evo-lane-a { stroke: rgba(91,164,255,0.8); }
.evo-lane-b { stroke: rgba(40,210,190,0.8); }
.evo-lane-c { stroke: rgba(230,175,90,0.75); }
.evo-lane-d { stroke: rgba(230,110,110,0.75); }
.evo-lane-e { stroke: rgba(160,100,255,0.75); }
.evo-lane-f { stroke: rgba(120,220,190,0.7); }
.evo-branch { fill: none; stroke: rgba(230,110,110,0.4); stroke-width: 1.3; stroke-dasharray: 3 3; }

.evo-node { stroke: none; }
.evo-node-a { fill: rgba(91,164,255,0.9); }
.evo-node-b { fill: rgba(40,210,190,0.9); }
.evo-node-c { fill: rgba(230,175,90,0.85); }
.evo-node-d { fill: rgba(230,110,110,0.85); }
.evo-node-e { fill: rgba(160,100,255,0.85); }
.evo-node-f { fill: rgba(120,220,190,0.85); }
.evo-pulse { animation: nodePulse 2.6s ease-in-out infinite; }

/* Visual de la card "Más datos que otras plataformas": comparación de
   barras (TyK vs. otras plataformas), representación directa del título.
   Deliberadamente distinta del Venn de #diferente para no repetir el
   mismo lenguaje visual dos veces en la misma página. */
.mdt-bar { fill: rgba(140,170,210,0.32); }
.mdt-bar-tyk {
  fill: rgba(58,142,246,0.75);
  transform-box: fill-box; transform-origin: bottom;
  animation: mdtGrow 2.8s ease-in-out infinite;
}
@keyframes mdtGrow { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }
.mdt-plus { font-family: var(--font); font-size: 17px; font-weight: 700; fill: var(--blue-bright); text-anchor: middle; animation: nodePulse 2.6s ease-in-out infinite; }
.mdt-lbl { font-family: var(--font); font-size: 11px; fill: var(--muted); text-anchor: middle; }
.mdt-lbl-tyk { font-family: var(--font); font-size: 11.5px; font-weight: 700; fill: var(--blue-bright); text-anchor: middle; }

/* Visual de la card "Dialoga con tus datos" (sección Qué productos,
   individual.html): reutiliza el marco .nb-frame/.nb-topbar/.nb-dots
   (definidos en styles.css) pero con un cuerpo de preguntas sugeridas en
   vez de celdas de código — inspirado en el ejemplo real (Explore Data),
   que es una interfaz de consulta, no un notebook. */
.chat-body { padding: 0.7rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 8px; }
.chat-bubble {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(58,142,246,0.16);
  background: rgba(58,142,246,0.05);
  font-family: var(--font); font-size: 10.5px; line-height: 1.4;
  color: rgba(200,215,240,0.75);
}
.chat-bubble.chat-active {
  border-color: rgba(58,142,246,0.4);
  background: var(--hover-bg);
  color: var(--white);
}
.chat-ico { font-size: 13px; flex-shrink: 0; }

/* Accesibilidad: sin animación, se muestra la primera página fija. */
@media (prefers-reduced-motion: reduce) {
  .comic-page { transition: none; }
  .comic-page.is-active img { animation: none; }
}