/* ============================================================
   VASAK · comportamiento por tamaño
   ------------------------------------------------------------
   Movil no es "el escritorio apretado". Dos decisiones propias:

   1. El hero pierde el corte a 24 grados. Una diagonal de esa
      inclinación en 390 px de ancho no se lee como diseño, se lee
      como error. En su lugar el video pasa a ser fondo completo con
      velo, y la tipografía ocupa todo el ancho.
   2. Los índices dejan de ser renglones de dos columnas y pasan a
      bloques apilados con el código arriba, que es como se leen las
      listas en pantalla angosta.
   ============================================================ */

/* ------------------------------------------------------------------
   HASTA 960 px
   ------------------------------------------------------------------ */
@media (max-width: 960px) {
  :root {
    --vk-band: clamp(60px, 13vw, 96px);
  }

  .vk-hero {
    --hero-h: auto;
    min-height: 100svh;
    align-items: end;
    padding-top: var(--vk-9);
  }

  /* Fondo completo, sin diagonal. */
  .vk-hero__media {
    inset: 0;
    width: 100%;
    clip-path: none;
  }

  .vk-hero__media video,
  .vk-hero__media img {
    opacity: 0.42;
  }

  .vk-hero__media::after {
    background: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.97) 0%,
      rgba(8, 9, 10, 0.86) 42%,
      rgba(8, 9, 10, 0.6) 100%
    );
  }

  /* El filete diagonal se conserva, pero como acento corto en el
     borde superior: sigue siendo el ángulo de marca, sin partir la
     pantalla al medio. */
  .vk-hero__edge {
    left: auto;
    right: 8%;
    top: 0;
    height: 132px;
    opacity: 0.7;
  }

  .vk-hero__body {
    max-width: none;
    padding-block: var(--vk-8) calc(var(--vk-9) + 32px);
  }

  .vk-hero__sub {
    max-width: none;
  }

  .vk-hero__actions .vk-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .vk-phero {
    padding-block: calc(var(--vk-8) + 24px) var(--vk-8);
  }

  .vk-phero__media {
    aspect-ratio: 16 / 10;
    max-height: none;
  }

  .vk-index__row {
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-areas:
      'code go'
      'title title'
      'desc desc';
    row-gap: var(--vk-2);
    padding-block: var(--vk-5);
  }

  .vk-index__code { grid-area: code; padding-top: 0; }
  .vk-index__title { grid-area: title; }
  .vk-index__desc { grid-area: desc; }
  .vk-index__go { grid-area: go; padding-top: 0; text-align: right; }

  /* El barrido diagonal del hover no aporta en táctil y encarece el
     repintado: se apaga. */
  .vk-index__row::before { display: none; }
  .vk-index__row:hover { padding-left: 0; }

  .vk-quote { max-width: none; }

  .vk-footer__brand img { width: 52px; height: 52px; }
}

/* ------------------------------------------------------------------
   HASTA 720 px
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
  :root {
    --vk-fs-body: 1.02rem;
  }

  .vk-header__in { height: 62px; gap: var(--vk-4); }

  /* El CTA de la cabecera se retira: en 390 px partia en dos lineas y
     dejaba al burger sin aire. El mismo boton esta en el hero y al pie
     del menu, asi que no se pierde ninguna via de conversion. */
  .vk-header .vk-btn--primary { display: none; }
  .vk-brand img { width: 34px; height: 34px; }
  .vk-brand__name { font-size: 0.84rem; letter-spacing: 0.13em; }
  .vk-brand__sub { font-size: 0.52rem; letter-spacing: 0.26em; }

  .vk-hero__strip ul { gap: var(--vk-2) var(--vk-5); }
  .vk-hero__strip li { font-size: 0.6rem; letter-spacing: 0.12em; }

  .vk-flow__step {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 11px 0;
  }

  .vk-flow__step + .vk-flow__step::before { display: none; }

  .vk-flow__k { justify-self: start; }

  .vk-spec__row { padding-block: var(--vk-4); }

  .vk-checklist li { grid-template-columns: 26px minmax(0, 1fr); }

  .vk-btn { padding: 14px 20px; width: 100%; justify-content: center; }

  .vk-hero__actions { gap: var(--vk-3); }

  .vk-footer__bottom { flex-direction: column; align-items: flex-start; }

  .vk-fullbleed { min-height: 380px; }
}

/* ------------------------------------------------------------------
   PANTALLAS MUY ANCHAS
   El corte del hero se calcula con la altura; a partir de cierto
   ancho conviene ceder terreno al video para que la diagonal no
   invada el bloque de texto.
   ------------------------------------------------------------------ */
@media (min-width: 1600px) {
  .vk-hero__media { width: 58%; }
  .vk-hero__edge { left: calc(42% + (var(--hero-h) * var(--vk-tan)) / 2); }
}

/* ------------------------------------------------------------------
   IMPRESION
   Una propuesta impresa desde el navegador tiene que ser legible.
   ------------------------------------------------------------------ */
@media print {
  .vk-header,
  .vk-mobile,
  .vk-burger,
  .vk-hero__media,
  .vk-hero__edge,
  .vk-footer,
  .vk-btn { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .vk-dark, .vk-darker { background: #fff !important; color: #000 !important; }
  .vk-dark h1, .vk-dark h2, .vk-dark h3,
  .vk-darker h1, .vk-darker h2, .vk-darker h3 { color: #000 !important; }
  .vk-band { padding-block: 18pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; }
  .vk-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}