/* ============================================================
   qesta.css — estilos propios de la landing (clases q-*).
   Los tokens, tipografía y componentes vienen del design system:
   ../_ds/qesta-design-system/styles.css
   ============================================================ */

html { scroll-behavior: smooth; }
  body { background: var(--bg); }

  
  /* --- punto rojo "en vivo" — único motion ambiental --- */
  .q-livedot {
    display: inline-block; border-radius: 999px; background: var(--accent); flex: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .q-livedot { animation: q-blink 2.4s var(--ease-standard) infinite; }
    .q-pulse {
      animation: q-corescale 3.2s ease-in-out infinite;
      transform-origin: center; transform-box: fill-box;
    }
    .q-orbit { transform-box: view-box; transform-origin: 560px 170px; }
    .q-orbit-a { animation: q-rotate 10s linear infinite; }
    .q-orbit-b { animation: q-rotate 18s linear infinite reverse; }
  }
  @keyframes q-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  @keyframes q-corescale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
  @keyframes q-rotate { to { transform: rotate(360deg); } }

  /* logos de clientes: monocromo sobrio, foco al pasar */
  .q-clientlogo {
    filter: grayscale(1) brightness(1.06) contrast(0.9);
    opacity: 0.78;
    transition: opacity var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard);
  }
  /* trazo fino (caligrafía) y bajadas pequeñas: sin aclarado */
  .q-clientlogo--thin {
    filter: grayscale(1) contrast(1);
    opacity: 0.86;
  }
  .q-clientlogo:hover, .q-clientlogo--thin:hover {
    filter: grayscale(1) brightness(0.88) contrast(1.04);
    opacity: 1;
  }

  /* --- botón fantasma sobre tinta --- */
  .q-btn-dark {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 46px; padding: 0 var(--space-5);
    border: 1.5px solid rgba(246, 244, 238, 0.28); border-radius: var(--radius-md);
    color: var(--merengue); font-weight: var(--fw-semibold); font-size: var(--text-sm);
    transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  }
  .q-btn-dark:hover { background: rgba(246, 244, 238, 0.08); border-color: rgba(246, 244, 238, 0.5); }
  .q-btn-dark:active { transform: translateY(1px); }

  .q-footlink { transition: color var(--dur-fast) var(--ease-standard); }
  .q-footlink:hover { color: var(--text-primary); }

  /* --- densidad --- */
  [data-density="compacta"] { --section-y: var(--space-8); --q-hero-top: 56px; --q-hero-bottom: 64px; }
  [data-density="aireada"] { --q-hero-top: 96px; --q-hero-bottom: 96px; }

  /* --- visual del hero: desktop vs mobile --- */
  .q-herovisual-m { display: none !important; }
  .q-nav-cta-m { display: none !important; }

  /* paquetes de servicio: tabs + bento */
  .q-packs { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .q-pack-tabs { display: flex; flex-direction: column; gap: var(--space-3); }
  .q-pack-tab { width: 100%; }
  .q-pack-tab:hover { border-color: var(--border-strong); }
  @keyframes q-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* interior del cubo sellado: cables con luz, nodos y celdas operando */
  .q-cable {
    background: linear-gradient(to bottom,
      transparent 0%, transparent 6%,
      var(--accent) 12%, var(--accent) 15%,
      transparent 21%, transparent 100%);
    background-size: 100% 340%;
  }
  @media (prefers-reduced-motion: no-preference) {
    .q-cable { animation: q-cablerun 2.6s linear infinite; }
    .q-node { animation: q-nodepulse 2.2s var(--ease-standard) infinite; }
    .q-cell-live { animation: q-cellpulse 3.4s var(--ease-standard) infinite; }
    .q-bus { animation: q-buspulse 3s var(--ease-standard) infinite; }
    .q-core { animation: q-corepulse 2.8s var(--ease-standard) infinite; }
    .q-orbitz { animation: q-orbitz linear infinite; }
    .q-walk { animation: q-shift var(--ease-standard) infinite alternate; }
    .q-slide { animation: q-shift linear infinite alternate; }
    .q-arm { animation: q-armswing var(--ease-standard) infinite alternate; }
    .q-packet { animation: q-packetrun linear infinite; }
    .q-conveyor { animation: q-belt 1.6s linear infinite; }
    .q-screen { animation: q-screenflick 2.4s var(--ease-standard) infinite; }
    .q-lift { animation: q-lift 9s var(--ease-standard) infinite alternate; }
  }
  .q-conveyor {
    background-image: repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--n-500) 34%, transparent) 0 2px, transparent 2px 11px);
  }
  @keyframes q-belt { to { background-position: 11px 0; } }
  @keyframes q-screenflick {
    0%, 100% { background: var(--accent-tint); }
    50% { background: color-mix(in srgb, var(--accent) 26%, transparent); }
  }
  @keyframes q-lift {
    from { transform: translateZ(var(--q-lo, 0px)); }
    to { transform: translateZ(var(--q-hi, 0px)); }
  }
  @keyframes q-orbitz { to { transform: rotateZ(360deg); } }
  @keyframes q-armswing {
    from { transform: rotateZ(-22deg); }
    to { transform: rotateZ(26deg); }
  }
  @keyframes q-packetrun {
    from { left: -14px; }
    to { left: 100%; }
  }
  @keyframes q-shift {
    from { transform: translateX(0); }
    to { transform: translateX(var(--q-range, 40px)); }
  }
  @keyframes q-buspulse {
    0%, 100% { background: var(--n-400); }
    50% { background: color-mix(in srgb, var(--accent) 55%, var(--n-400)); }
  }
  @keyframes q-corepulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
    60% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  @keyframes q-cablerun {
    from { background-position: 0 -140%; }
    to { background-position: 0 240%; }
  }
  @keyframes q-nodepulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  @keyframes q-cellpulse {
    0%, 100% { filter: none; }
    50% { filter: brightness(0.965); }
  }
  @keyframes q-tile-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .q-bento > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  }

  /* --- responsive --- */
  /* ventanas bajas: comprimir el rail antes que crecer la escena */
  @media (max-height: 620px) {
    .q-rail-desc { display: none; }
  }
  @media (max-width: 900px) {
    .q-gov-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
    .q-packs { grid-template-columns: 1fr !important; gap: var(--space-5) !important; }
    .q-pack-tabs {
      flex-direction: row !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-left: calc(var(--space-6) * -1);
      margin-right: calc(var(--space-6) * -1);
      padding: 2px var(--space-6);
    }
    .q-pack-tabs::-webkit-scrollbar { display: none; }
    .q-pack-tab { flex: 0 0 82%; scroll-snap-align: center; }
    .q-stack-scene { flex-direction: column; gap: var(--space-4) !important; }
    .q-stack-rail {
      width: 100% !important; position: static !important;
      display: flex; flex-wrap: wrap; gap: var(--space-4);
    }
    .q-rail-item {
      position: static !important; transform: none !important;
      left: auto !important; right: auto !important; top: auto !important;
      flex: 1 1 200px; opacity: 1 !important;
    }
    .q-rail-lead { display: none; }
    .q-seal-tag { position: static !important; transform: none !important; align-self: flex-start; }
  }
  @media (max-width: 920px) {
    .q-orq-grid { grid-template-columns: 1fr !important; }
    .q-orq-grid > * { order: 0 !important; }
    /* el gráfico del método a ancho completo, con la leyenda en flujo */
    .q-orq-visual { width: 100%; }
    .q-orq-caption {
      position: static !important;
      margin-top: var(--space-4);
      justify-content: center;
      width: 100%;
    }
    .q-contact-grid { grid-template-columns: 1fr !important; }
    .q-contact-grid > * { order: 0 !important; }
  }
  @media (max-width: 640px) {
    .q-bento { grid-template-columns: 1fr !important; }
    .q-bento > * { grid-column: span 1 !important; }

    /* logos de clientes: carrusel horizontal con snap */
    .q-clients-track {
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      width: 100%;
      margin-left: calc(var(--space-6) * -1);
      margin-right: calc(var(--space-6) * -1);
      padding: 0 var(--space-6);
      gap: var(--space-8) !important;
    }
    .q-clients-track::-webkit-scrollbar { display: none; }
    .q-clients-track > * { flex: 0 0 auto; scroll-snap-align: center; }

    .q-herovisual { display: none !important; }
    .q-herovisual-m { display: block !important; margin: var(--space-5) auto; max-width: 380px; }
    .q-form-row { grid-template-columns: 1fr !important; }

    /* header: CTA como icon button */
    .q-nav-cta { display: none !important; }
    .q-nav-cta-m { display: inline-flex !important; }

    /* hero: CTAs a todo el ancho, mismo comportamiento que el botón del form */
    .q-hero-ctas { flex-direction: column; width: 100%; gap: var(--space-3) !important; }
    .q-hero-ctas > .ds-btn { width: 100%; justify-content: center; }

    /* carruseles horizontales: Qué hacemos / Cómo trabajamos */
    .q-services-grid, .q-process-grid {
      display: flex !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      margin-left: calc(var(--space-6) * -1);
      margin-right: calc(var(--space-6) * -1);
      padding: 2px var(--space-6) var(--space-5);
      scrollbar-width: none;
    }
    .q-services-grid::-webkit-scrollbar, .q-process-grid::-webkit-scrollbar { display: none; }
    .q-services-grid > *, .q-process-grid > * {
      flex: 0 0 76%;
      min-width: 0;
      scroll-snap-align: center;
    }

    /* footer: aire consistente contra los dividers */
    .q-footer-cols {
      grid-template-columns: 1fr !important;
      gap: var(--space-7) !important;
      padding-top: var(--space-8) !important;
      padding-bottom: var(--space-8) !important;
    }
    .q-footer-vdiv { display: none; }
    .q-group-band { gap: var(--space-5) !important; }
  }