/* ============================================================
   VASAK · componentes
   Todo lo diagonal usa --vk-angle. No hay otro angulo en el sitio.
   ============================================================ */

/* ------------------------------------------------------------------
   BOTONES
   Dos jerarquias y nada mas. Un sitio con seis estilos de boton no
   tiene jerarquia, tiene surtido.
   ------------------------------------------------------------------ */
.vk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--vk-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--vk-radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.28s var(--vk-ease), background 0.28s var(--vk-ease),
    border-color 0.28s var(--vk-ease), transform 0.28s var(--vk-ease-out);
}

.vk-btn__arrow {
  transition: transform 0.32s var(--vk-ease-out);
}

.vk-btn:hover .vk-btn__arrow {
  transform: translateX(4px);
}

.vk-btn--primary {
  background: var(--vk-white);
  color: var(--vk-black);
  border-color: var(--vk-white);
}

.vk-btn--primary:hover {
  background: var(--vk-gold-hi);
  border-color: var(--vk-gold-hi);
}

.vk-paper-ctx .vk-btn--primary,
.vk-btn--primary.is-onpaper {
  background: var(--vk-ink);
  color: var(--vk-white);
  border-color: var(--vk-ink);
}

.vk-paper-ctx .vk-btn--primary:hover,
.vk-btn--primary.is-onpaper:hover {
  background: var(--vk-black);
}

.vk-btn--ghost {
  background: transparent;
  color: var(--vk-white);
  border-color: rgba(255, 255, 255, 0.28);
}

.vk-btn--ghost:hover {
  border-color: var(--vk-gold);
  color: var(--vk-gold-hi);
}

.vk-paper-ctx .vk-btn--ghost {
  color: var(--vk-ink);
  border-color: var(--vk-hair);
}

.vk-paper-ctx .vk-btn--ghost:hover {
  border-color: var(--vk-gold-deep);
  color: var(--vk-gold-deep);
}

/* Enlace de texto con subrayado que se dibuja. */
.vk-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  padding-bottom: 3px;
}

.vk-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left;
  transition: opacity 0.24s, transform 0.34s var(--vk-ease-out);
}

.vk-link:hover::after {
  opacity: 1;
  background: var(--vk-gold);
}

.vk-link svg {
  transition: transform 0.32s var(--vk-ease-out);
}

.vk-link:hover svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------------
   MEDIA
   Toda fotografia del sitio lleva la misma muesca en la esquina
   superior izquierda, al angulo de marca. Es el troquel de la carpeta
   llevado a pantalla: una sola decoracion, repetida con disciplina.
   ------------------------------------------------------------------ */
.vk-media {
  --notch: clamp(30px, 5vw, 84px);
  position: relative;
  overflow: hidden;
  background: var(--vk-slate);
  border-radius: var(--vk-radius);
  clip-path: polygon(
    calc(var(--notch) * var(--vk-tan)) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--notch)
  );
}

.vk-media img,
.vk-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vk-media--flat {
  clip-path: none;
}

.vk-figure {
  margin: 0;
}

.vk-figure figcaption {
  margin-top: var(--vk-4);
  font-family: var(--vk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--vk-ink-2);
  text-transform: uppercase;
  display: flex;
  gap: var(--vk-3);
  align-items: flex-start;
}

.vk-dark .vk-figure figcaption,
.vk-darker .vk-figure figcaption {
  color: var(--vk-on-dark-2);
}

.vk-figure figcaption::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--vk-gold);
  flex: none;
  margin-top: 7px;
}

/* Banda a sangre completa */
.vk-fullbleed {
  position: relative;
  min-height: clamp(320px, 52vh, 620px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--vk-black);
}

.vk-fullbleed__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vk-fullbleed__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.vk-fullbleed__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      calc(90deg - var(--vk-angle)),
      rgba(8, 9, 10, 0.92) 0%,
      rgba(8, 9, 10, 0.55) 46%,
      rgba(8, 9, 10, 0.86) 100%
    ),
    linear-gradient(to top, rgba(8, 9, 10, 0.94), transparent 62%);
}

.vk-fullbleed__body {
  position: relative;
  z-index: 2;
  padding-block: var(--vk-9) var(--vk-8);
  color: var(--vk-on-dark);
}

/* ------------------------------------------------------------------
   HERO
   El corte a 24 grados entre el campo tipografico y el video es la
   firma de la pagina. La altura es una variable porque el borde se
   calcula con ella: --hero-h * tan(24,1deg).
   ------------------------------------------------------------------ */
.vk-hero {
  --hero-h: clamp(620px, 92vh, 900px);
  position: relative;
  min-height: var(--hero-h);
  background: var(--vk-black);
  color: var(--vk-on-dark);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.vk-hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 0;
  clip-path: polygon(
    calc(var(--hero-h) * var(--vk-tan)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

.vk-hero__media video,
.vk-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

/* Velo que garantiza contraste del titular sobre el video */
.vk-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    calc(90deg - var(--vk-angle)),
    rgba(8, 9, 10, 0.96) 0%,
    rgba(8, 9, 10, 0.42) 34%,
    rgba(8, 9, 10, 0.2) 70%,
    rgba(8, 9, 10, 0.6) 100%
  );
}

/* El filete dorado sobre el borde: una linea vertical girada 24 grados,
   que es exactamente la inclinacion del triangulo del isologo. */
.vk-hero__edge {
  position: absolute;
  top: -8%;
  height: 116%;
  width: 1px;
  z-index: 2;
  background: var(--vk-gold-metal);
  opacity: 0.85;
  left: calc(38% + (var(--hero-h) * var(--vk-tan)) / 2);
  transform: rotate(var(--vk-angle));
  pointer-events: none;
}

.vk-hero__body {
  position: relative;
  z-index: 3;
  padding-block: var(--vk-8) calc(var(--vk-8) + 46px);
  max-width: 44rem;
}

.vk-hero h1 {
  font-size: var(--vk-fs-hero);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--vk-white);
  margin: var(--vk-5) 0 0;
}

.vk-hero h1 span {
  display: block;
}

.vk-hero__cola {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  margin-top: 0.28em;
}

.vk-hero__sub {
  font-size: var(--vk-fs-lead);
  line-height: 1.55;
  color: var(--vk-on-dark-2);
  margin: var(--vk-6) 0 0;
  max-width: 34rem;
}

.vk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-4);
  margin-top: var(--vk-7);
}

/* Tira de capacidades al pie del hero */
.vk-hero__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid var(--vk-hair-dark);
  background: linear-gradient(to top, rgba(8, 9, 10, 0.9), transparent);
}

.vk-hero__strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-3) var(--vk-6);
  padding-block: var(--vk-4);
}

.vk-hero__strip li {
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vk-on-dark-2);
}

/* Secuencia de entrada: una sola, de 1,1 s, y no se repite. */
.vk-hero .vk-eyebrow,
.vk-hero h1 span,
.vk-hero__cola,
.vk-hero__sub,
.vk-hero__actions,
.vk-hero__strip {
  animation: vk-rise 0.85s var(--vk-ease-out) backwards;
}

.vk-hero .vk-eyebrow { animation-delay: 0.05s; }
.vk-hero h1 span:nth-child(1) { animation-delay: 0.14s; }
.vk-hero h1 span:nth-child(2) { animation-delay: 0.22s; }
.vk-hero h1 span:nth-child(3) { animation-delay: 0.3s; }
.vk-hero__cola { animation-delay: 0.4s; }
.vk-hero__sub { animation-delay: 0.5s; }
.vk-hero__actions { animation-delay: 0.6s; }
.vk-hero__strip { animation-delay: 0.75s; }

@keyframes vk-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.vk-hero__edge {
  animation: vk-edge 1.1s var(--vk-ease-out) backwards;
  animation-delay: 0.1s;
}

@keyframes vk-edge {
  from { opacity: 0; transform: rotate(var(--vk-angle)) scaleY(0); }
  to { opacity: 0.85; transform: rotate(var(--vk-angle)) scaleY(1); }
}

/* ------------------------------------------------------------------
   HERO INTERIOR (paginas que no son la home)
   Lleva ademas la clase .vk-dark en el marcado: sin declarar el
   contexto, los filetes y las volantas heredan el oro para fondo CLARO
   (#7E5A12) y sobre grafito eso da 2,98:1. La banda se veia bien y el
   texto chico no pasaba AA.
   ------------------------------------------------------------------ */
.vk-phero {
  background: var(--vk-paper);
  color: var(--vk-ink);
  padding-block: clamp(84px, 11vw, 168px) clamp(56px, 7vw, 104px);
  position: relative;
  overflow: hidden;
}

/* Variante oscura, para las pocas paginas que ganan abriendo en negro. */
.vk-phero--oscuro {
  background: var(--vk-graphite);
  color: var(--vk-on-dark);
}

.vk-phero__grid {
  display: grid;
  gap: var(--vk-8);
  align-items: center;
}

@media (min-width: 960px) {
  .vk-phero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(40px, 6vw, 96px);
  }
}

.vk-phero h1 {
  font-size: var(--vk-fs-h1);
  line-height: 1.0;
  letter-spacing: -0.038em;
  color: var(--vk-ink);
}

.vk-phero--oscuro h1 { color: var(--vk-white); }

.vk-phero__sub {
  font-size: var(--vk-fs-lead);
  color: var(--vk-ink-2);
  margin-top: var(--vk-5);
  max-width: 36rem;
}

.vk-phero--oscuro .vk-phero__sub { color: var(--vk-on-dark-2); }

.vk-phero__media {
  aspect-ratio: 4 / 5;
  max-height: 520px;
}

.vk-phero__media--wide {
  aspect-ratio: 16 / 10;
}

/* Migas */
.vk-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vk-ink-2);
  margin-bottom: var(--vk-6);
}

.vk-phero--oscuro .vk-breadcrumb { color: var(--vk-on-dark-2); }

.vk-breadcrumb a:hover { color: var(--vk-gold-deep); }
.vk-phero--oscuro .vk-breadcrumb a:hover { color: var(--vk-gold-hi); }

.vk-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--vk-gold-deep);
}

.vk-phero--oscuro .vk-breadcrumb li:not(:last-child)::after { color: var(--vk-gold); }

.vk-breadcrumb ol {
  display: contents;
}

.vk-breadcrumb li {
  display: flex;
  align-items: center;
}

/* ------------------------------------------------------------------
   INDICE EDITORIAL (capacidades, soluciones, servicios)
   No son tarjetas: son renglones de un indice. Cada uno lleva su
   codigo de taxonomia, no un numero de orden, porque no hay orden.
   ------------------------------------------------------------------ */
.vk-index {
  border-top: 1px solid var(--vk-hair-dark);
}

.vk-paper-ctx .vk-index {
  border-color: var(--vk-hair);
}

.vk-index__row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 26px;
  gap: var(--vk-4);
  align-items: start;
  padding: var(--vk-6) 0;
  border-bottom: 1px solid var(--vk-hair-dark);
  position: relative;
  transition: padding-left 0.4s var(--vk-ease-out);
}

.vk-paper-ctx .vk-index__row {
  border-color: var(--vk-hair);
}

@media (min-width: 860px) {
  .vk-index__row {
    grid-template-columns: 78px minmax(0, 1.05fr) minmax(0, 1.25fr) 30px;
    gap: var(--vk-6);
    align-items: center;
    padding-block: var(--vk-7);
  }
}

/* El barrido dorado del hover entra en diagonal, al angulo de marca. */
.vk-index__row::before {
  content: '';
  position: absolute;
  left: -4%;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(
    calc(90deg - var(--vk-angle)),
    rgba(182, 144, 78, 0.14),
    transparent 78%
  );
  transition: width 0.5s var(--vk-ease-out);
  pointer-events: none;
}

.vk-index__row:hover::before,
.vk-index__row:focus-within::before {
  width: 108%;
}

.vk-index__row:hover,
.vk-index__row:focus-within {
  padding-left: var(--vk-4);
}

.vk-index__code {
  font-family: var(--vk-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--vk-gold);
  padding-top: 5px;
}

.vk-paper-ctx .vk-index__code {
  color: var(--vk-gold-deep);
}

.vk-index__title {
  font-family: var(--vk-display);
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  color: var(--vk-white);
}

.vk-paper-ctx .vk-index__title {
  color: var(--vk-ink);
}

.vk-index__desc {
  color: var(--vk-on-dark-2);
  font-size: 0.98rem;
  line-height: 1.55;
  margin-top: var(--vk-2);
}

.vk-paper-ctx .vk-index__desc {
  color: var(--vk-ink-2);
}

@media (min-width: 860px) {
  .vk-index__desc { margin-top: 0; }
}

.vk-index__go {
  color: var(--vk-gold);
  transition: transform 0.36s var(--vk-ease-out);
  padding-top: 6px;
}

.vk-index__row:hover .vk-index__go {
  transform: translateX(6px);
}

.vk-index__link {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------
   LISTA DE SINTOMAS / VERIFICACION
   ------------------------------------------------------------------ */
.vk-checklist li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--vk-3);
  padding: var(--vk-4) 0;
  border-bottom: 1px solid var(--vk-hair);
  font-size: 1.02rem;
  line-height: 1.5;
}

.vk-dark .vk-checklist li,
.vk-darker .vk-checklist li {
  border-color: var(--vk-hair-dark);
}

.vk-checklist li::before {
  content: counter(vk-c, decimal-leading-zero);
  counter-increment: vk-c;
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--vk-gold-deep);
  padding-top: 6px;
}

.vk-dark .vk-checklist li::before,
.vk-darker .vk-checklist li::before {
  color: var(--vk-gold);
}

.vk-checklist {
  counter-reset: vk-c;
}

/* Lista con vineta de guion, sin numerar (cuando no hay orden) */
.vk-dashlist li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--vk-3);
  padding: 7px 0;
  line-height: 1.55;
}

.vk-dashlist li::before {
  content: '';
  width: 13px;
  height: 1px;
  background: var(--vk-gold-deep);
  margin-top: 0.78em;
}

.vk-dark .vk-dashlist li::before,
.vk-darker .vk-dashlist li::before {
  background: var(--vk-gold);
}

/* ------------------------------------------------------------------
   FICHA TECNICA
   El registro "hoja de datos": lo que hace que la pagina se lea como
   escrita por una firma de ingenieria y no por una agencia.
   ------------------------------------------------------------------ */
.vk-spec {
  border-top: 1px solid var(--vk-hair);
}

.vk-dark .vk-spec,
.vk-darker .vk-spec {
  border-color: var(--vk-hair-dark);
}

.vk-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--vk-2);
  padding: var(--vk-5) 0;
  border-bottom: 1px solid var(--vk-hair);
}

.vk-dark .vk-spec__row,
.vk-darker .vk-spec__row {
  border-color: var(--vk-hair-dark);
}

@media (min-width: 760px) {
  .vk-spec__row {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--vk-6);
  }
}

.vk-spec__k {
  font-family: var(--vk-mono);
  font-size: var(--vk-fs-mono);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vk-gold-deep);
  padding-top: 4px;
}

.vk-dark .vk-spec__k,
.vk-darker .vk-spec__k {
  color: var(--vk-gold);
}

.vk-spec__v strong {
  display: block;
  font-family: var(--vk-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.vk-dark .vk-spec__v strong,
.vk-darker .vk-spec__v strong {
  color: var(--vk-white);
}

.vk-spec__v span {
  color: var(--vk-ink-2);
  font-size: 0.97rem;
  line-height: 1.55;
}

.vk-dark .vk-spec__v span,
.vk-darker .vk-spec__v span {
  color: var(--vk-on-dark-2);
}

/* ------------------------------------------------------------------
   SECUENCIA NUMERADA (metodo, flujos)
   Aca la numeracion SI dice algo: es una secuencia real.
   ------------------------------------------------------------------ */
.vk-steps {
  display: grid;
  gap: 1px;
  background: var(--vk-hair);
}

.vk-dark .vk-steps,
.vk-darker .vk-steps {
  background: var(--vk-hair-dark);
}

@media (min-width: 760px) {
  .vk-steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

.vk-step {
  background: var(--vk-paper);
  padding: var(--vk-6) var(--vk-5) var(--vk-7);
  position: relative;
}

.vk-dark .vk-step,
.vk-darker .vk-step {
  background: var(--vk-graphite);
}

.vk-paper-2 .vk-step {
  background: var(--vk-paper-2);
}

.vk-step__n {
  font-family: var(--vk-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--vk-gold-deep);
  display: block;
  margin-bottom: var(--vk-5);
}

.vk-dark .vk-step__n,
.vk-darker .vk-step__n {
  color: var(--vk-gold);
}

.vk-step h3 {
  font-size: 1.1rem;
  letter-spacing: -0.018em;
  margin-bottom: var(--vk-3);
}

.vk-step p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--vk-ink-2);
}

.vk-dark .vk-step p,
.vk-darker .vk-step p {
  color: var(--vk-on-dark-2);
}

/* ------------------------------------------------------------------
   DEMOSTRACION ANTES / DESPUES
   El componente interactivo de la home. Es un argumento dibujado, no
   una animacion decorativa.
   ------------------------------------------------------------------ */
.vk-flow {
  display: grid;
  gap: var(--vk-6);
}

@media (min-width: 880px) {
  .vk-flow { grid-template-columns: 1fr 1fr; gap: var(--vk-8); }
}

.vk-flow__col {
  border: 1px solid var(--vk-hair-dark);
  border-radius: var(--vk-radius);
  padding: var(--vk-6);
  background: rgba(255, 255, 255, 0.016);
  transition: border-color 0.4s var(--vk-ease), background 0.4s var(--vk-ease);
}

.vk-flow__col[data-state='on'] {
  border-color: rgba(182, 144, 78, 0.5);
  background: rgba(182, 144, 78, 0.045);
}

.vk-flow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vk-4);
  padding-bottom: var(--vk-5);
  margin-bottom: var(--vk-2);
  border-bottom: 1px solid var(--vk-hair-dark);
}

.vk-flow__head h3 {
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}

.vk-flow__meta {
  font-family: var(--vk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vk-on-dark-2);
}

.vk-flow__step {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--vk-4);
  padding: 13px 0;
  align-items: baseline;
  position: relative;
  opacity: 0.42;
  transition: opacity 0.45s var(--vk-ease);
}

.vk-flow__col[data-state='on'] .vk-flow__step {
  opacity: 1;
}

.vk-flow__step + .vk-flow__step::before {
  content: '';
  position: absolute;
  left: 43px;
  top: -13px;
  height: 13px;
  width: 1px;
  background: var(--vk-hair-dark);
}

.vk-flow__col[data-state='on'] .vk-flow__step + .vk-flow__step::before {
  background: rgba(182, 144, 78, 0.45);
}

.vk-flow__k {
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--vk-gold);
  border: 1px solid rgba(182, 144, 78, 0.32);
  border-radius: var(--vk-radius);
  padding: 5px 9px;
  text-align: center;
}

.vk-flow__col--antes .vk-flow__k {
  color: var(--vk-on-dark-2);
  border-color: var(--vk-hair-dark);
}

.vk-flow__v {
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--vk-on-dark-2);
}

.vk-flow__toggle {
  display: inline-flex;
  border: 1px solid var(--vk-hair-dark);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--vk-7);
}

.vk-flow__toggle button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-on-dark-2);
  transition: background 0.3s var(--vk-ease), color 0.3s var(--vk-ease);
}

.vk-flow__toggle button[aria-pressed='true'] {
  background: var(--vk-gold);
  color: var(--vk-black);
}

/* ------------------------------------------------------------------
   TARJETAS EDITORIALES (insights, industrias)
   Se usan solo donde el contenido es realmente una coleccion de
   piezas equivalentes. En ningun otro lado.
   ------------------------------------------------------------------ */
.vk-cards {
  display: grid;
  gap: var(--vk-7) var(--vk-6);
}

@media (min-width: 720px) {
  .vk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .vk-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vk-card {
  display: flex;
  flex-direction: column;
  gap: var(--vk-4);
  position: relative;
}

.vk-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.vk-card__media img {
  transition: transform 1.1s var(--vk-ease-out), opacity 0.5s var(--vk-ease);
}

.vk-card:hover .vk-card__media img {
  transform: scale(1.045);
}

.vk-card__meta {
  display: flex;
  gap: var(--vk-4);
  align-items: center;
  font-family: var(--vk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vk-gold-deep);
}

.vk-dark .vk-card__meta,
.vk-darker .vk-card__meta {
  color: var(--vk-gold);
}

.vk-card h3 {
  font-size: 1.24rem;
  letter-spacing: -0.022em;
  line-height: 1.22;
}

.vk-card p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--vk-ink-2);
}

.vk-dark .vk-card p,
.vk-darker .vk-card p {
  color: var(--vk-on-dark-2);
}

.vk-card__link {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------
   CITA
   ------------------------------------------------------------------ */
.vk-quote {
  border-left: 1px solid var(--vk-gold);
  padding-left: clamp(20px, 3vw, 40px);
  max-width: 32ch;
}

.vk-quote p {
  font-family: var(--vk-display);
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--vk-ink);
}

.vk-dark .vk-quote p,
.vk-darker .vk-quote p {
  color: var(--vk-white);
}

/* ------------------------------------------------------------------
   FORMULARIO
   ------------------------------------------------------------------ */
.vk-form {
  display: grid;
  gap: var(--vk-5);
}

.vk-field {
  display: grid;
  gap: 7px;
}

.vk-field--half {
  grid-column: span 1;
}

@media (min-width: 680px) {
  .vk-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vk-5);
  }
}

.vk-field label {
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vk-ink-2);
  display: flex;
  gap: 7px;
  align-items: baseline;
}

.vk-field label .opt {
  color: var(--vk-ink-2);
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.vk-field input,
.vk-field select,
.vk-field textarea {
  width: 100%;
  padding: 14px 15px;
  background: var(--vk-white);
  border: 1px solid var(--vk-hair);
  border-radius: var(--vk-radius);
  font-size: 1rem;
  transition: border-color 0.22s var(--vk-ease), box-shadow 0.22s var(--vk-ease);
}

.vk-field textarea {
  min-height: 148px;
  resize: vertical;
}

.vk-field input:focus,
.vk-field select:focus,
.vk-field textarea:focus {
  outline: none;
  border-color: var(--vk-gold-deep);
  box-shadow: 0 0 0 3px rgba(182, 144, 78, 0.16);
}

.vk-field input[aria-invalid='true'],
.vk-field textarea[aria-invalid='true'],
.vk-field select[aria-invalid='true'] {
  border-color: #9b2c1e;
  box-shadow: 0 0 0 3px rgba(155, 44, 30, 0.12);
}

.vk-field__error {
  font-size: 0.82rem;
  color: #8f2718;
  min-height: 1.1em;
}

/* Selector de interes: casillas, no un desplegable escondido. */
.vk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.vk-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.vk-chip span {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--vk-hair);
  border-radius: 999px;
  font-family: var(--vk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--vk-white);
  transition: all 0.22s var(--vk-ease);
}

.vk-chip input:checked + span {
  background: var(--vk-ink);
  border-color: var(--vk-ink);
  color: var(--vk-white);
}

.vk-chip input:focus-visible + span {
  outline: 2px solid var(--vk-gold-deep);
  outline-offset: 2px;
}

.vk-form__note {
  font-size: 0.86rem;
  color: var(--vk-ink-2);
  line-height: 1.5;
}

.vk-form__status {
  border: 1px solid var(--vk-hair);
  border-left: 2px solid var(--vk-gold-deep);
  background: var(--vk-white);
  padding: var(--vk-5);
  border-radius: var(--vk-radius);
  font-size: 0.95rem;
  line-height: 1.55;
}

.vk-form__status:empty {
  display: none;
}

/* ------------------------------------------------------------------
   PREGUNTAS FRECUENTES
   ------------------------------------------------------------------ */
.vk-faq {
  border-top: 1px solid var(--vk-hair);
}

.vk-dark .vk-faq,
.vk-darker .vk-faq {
  border-color: var(--vk-hair-dark);
}

.vk-faq details {
  border-bottom: 1px solid var(--vk-hair);
}

.vk-dark .vk-faq details,
.vk-darker .vk-faq details {
  border-color: var(--vk-hair-dark);
}

.vk-faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--vk-5) 40px var(--vk-5) 0;
  font-family: var(--vk-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  position: relative;
}

.vk-faq summary::-webkit-details-marker {
  display: none;
}

.vk-faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: calc(var(--vk-5) + 0.65em);
  width: 11px;
  height: 1px;
  background: var(--vk-gold-deep);
  box-shadow: 0 0 0 0 transparent;
}

.vk-faq summary::before {
  content: '';
  position: absolute;
  right: 9px;
  top: calc(var(--vk-5) + 0.65em - 5px);
  width: 1px;
  height: 11px;
  background: var(--vk-gold-deep);
  transition: transform 0.3s var(--vk-ease);
}

.vk-faq details[open] summary::before {
  transform: scaleY(0);
}

.vk-dark .vk-faq summary::after,
.vk-dark .vk-faq summary::before {
  background: var(--vk-gold);
}

.vk-faq__body {
  padding-bottom: var(--vk-5);
  color: var(--vk-ink-2);
  max-width: var(--vk-measure);
}

.vk-dark .vk-faq__body,
.vk-darker .vk-faq__body {
  color: var(--vk-on-dark-2);
}

/* ------------------------------------------------------------------
   TABLA DE ALCANCE (hoy / a habilitar)
   ------------------------------------------------------------------ */
.vk-scope {
  display: grid;
  gap: 1px;
  background: var(--vk-hair);
  border: 1px solid var(--vk-hair);
  border-radius: var(--vk-radius);
  overflow: hidden;
}

@media (min-width: 760px) {
  .vk-scope { grid-template-columns: 1fr 1fr; }
}

.vk-scope__col {
  background: var(--vk-paper);
  padding: var(--vk-6);
}

.vk-scope__col h3 {
  font-family: var(--vk-mono);
  font-size: var(--vk-fs-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--vk-5);
  padding-bottom: var(--vk-4);
  border-bottom: 1px solid var(--vk-hair);
}

.vk-scope__col--hoy h3 { color: var(--vk-ink); }
.vk-scope__col--futuro h3 { color: var(--vk-gold-deep); }
.vk-scope__col--futuro { background: var(--vk-paper-2); }

/* ------------------------------------------------------------------
   BLOQUE DE CONTACTO / CTA
   ------------------------------------------------------------------ */
.vk-cta {
  display: grid;
  gap: var(--vk-7);
  align-items: end;
}

@media (min-width: 900px) {
  .vk-cta {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(40px, 6vw, 100px);
  }
}

/* ------------------------------------------------------------------
   ARTICULO
   ------------------------------------------------------------------ */
.vk-article {
  max-width: 43rem;
}

.vk-article h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.028em;
  margin: var(--vk-8) 0 var(--vk-4);
}

.vk-article h3 {
  font-size: 1.2rem;
  margin: var(--vk-6) 0 var(--vk-3);
}

.vk-article p,
.vk-article li {
  font-size: 1.09rem;
  line-height: 1.72;
  color: var(--vk-ink-2);
}

.vk-article > p:first-of-type {
  font-size: var(--vk-fs-lead);
  color: var(--vk-ink);
}

.vk-article strong {
  color: var(--vk-ink);
  font-weight: 600;
}

.vk-article ul {
  margin: 0 0 1.3em;
}

.vk-article ul li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--vk-3);
  padding: 5px 0;
}

.vk-article ul li::before {
  content: '';
  width: 13px;
  height: 1px;
  background: var(--vk-gold-deep);
  margin-top: 0.85em;
}

.vk-article blockquote {
  margin: var(--vk-7) 0;
  padding-left: var(--vk-5);
  border-left: 1px solid var(--vk-gold-deep);
}

.vk-article blockquote p {
  font-family: var(--vk-display);
  font-size: 1.3rem;
  line-height: 1.35;
  letter-spacing: -0.022em;
  color: var(--vk-ink);
}

/* ------------------------------------------------------------------
   PAGINA 404
   ------------------------------------------------------------------ */
.vk-404 {
  min-height: 72vh;
  display: grid;
  align-content: center;
  background: var(--vk-graphite);
  color: var(--vk-on-dark);
  padding-block: var(--vk-10);
}

.vk-404__code {
  font-family: var(--vk-mono);
  font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  color: transparent;
  background: var(--vk-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------------
   RECORRIDO POR ETAPAS (patrón de pestañas)
   Cada etapa declara qué se hace, qué puede fallar y qué queda
   registrado. La tercera columna es la que separa una consultoría de
   un folleto: nadie escribe el modo de falla si no trabajó el proceso.
   ------------------------------------------------------------------ */
.vk-rail__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--vk-hair-dark);
  border: 1px solid var(--vk-hair-dark);
  border-radius: var(--vk-radius);
  overflow: hidden;
}

.vk-paper-ctx .vk-rail__tabs {
  background: var(--vk-hair);
  border-color: var(--vk-hair);
}

.vk-rail__tab {
  flex: 1 1 128px;
  background: var(--vk-graphite);
  border: 0;
  cursor: pointer;
  padding: 15px 14px;
  text-align: left;
  display: grid;
  gap: 6px;
  transition: background 0.28s var(--vk-ease);
  position: relative;
}

.vk-paper-ctx .vk-rail__tab { background: var(--vk-paper); }

.vk-rail__tab:hover { background: var(--vk-slate); }
.vk-paper-ctx .vk-rail__tab:hover { background: var(--vk-paper-2); }

.vk-rail__tab[aria-selected='true'] { background: var(--vk-slate); }
.vk-paper-ctx .vk-rail__tab[aria-selected='true'] { background: var(--vk-white); }

/* La marca de etapa activa entra por arriba, al ángulo de marca. */
.vk-rail__tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--vk-gold-metal);
}

.vk-rail__n {
  font-family: var(--vk-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--vk-gold);
}

.vk-paper-ctx .vk-rail__n { color: var(--vk-gold-deep); }

.vk-rail__name {
  font-family: var(--vk-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--vk-on-dark-2);
  line-height: 1.2;
}

.vk-paper-ctx .vk-rail__name { color: var(--vk-ink-2); }

.vk-rail__tab[aria-selected='true'] .vk-rail__name { color: var(--vk-white); }
.vk-paper-ctx .vk-rail__tab[aria-selected='true'] .vk-rail__name { color: var(--vk-ink); }

.vk-rail__panel {
  border: 1px solid var(--vk-hair-dark);
  border-top: 0;
  padding: var(--vk-6);
  display: grid;
  gap: var(--vk-6);
}

.vk-paper-ctx .vk-rail__panel {
  border-color: var(--vk-hair);
  background: var(--vk-white);
}

@media (min-width: 820px) {
  .vk-rail__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vk-rail__cell h3 {
  font-family: var(--vk-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vk-gold);
  margin: 0 0 var(--vk-3);
  padding-bottom: var(--vk-3);
  border-bottom: 1px solid var(--vk-hair-dark);
}

.vk-paper-ctx .vk-rail__cell h3 {
  color: var(--vk-gold-deep);
  border-color: var(--vk-hair);
}

.vk-rail__cell p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--vk-on-dark-2);
}

.vk-paper-ctx .vk-rail__cell p { color: var(--vk-ink-2); }

/* ------------------------------------------------------------------
   MENSAJE ARMADO DEL FORMULARIO
   ------------------------------------------------------------------ */
.vk-mensaje {
  margin: var(--vk-5) 0 0;
  padding: var(--vk-5);
  background: var(--vk-paper-2);
  border: 1px solid var(--vk-hair);
  border-radius: var(--vk-radius);
  font-family: var(--vk-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
  color: var(--vk-ink);
}

/* ------------------------------------------------------------------
   BLOQUE DE DATOS DE CONTACTO
   ------------------------------------------------------------------ */
.vk-datos dt {
  font-family: var(--vk-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vk-gold);
  margin-bottom: 6px;
}

.vk-datos dd {
  margin: 0 0 var(--vk-5);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--vk-on-dark);
}

.vk-paper-ctx .vk-datos dt { color: var(--vk-gold-deep); }
.vk-paper-ctx .vk-datos dd { color: var(--vk-ink); }

/* ==================================================================
   GRAFICOS
   SVG generado en el build: se pinta junto con el HTML y no produce
   salto de maquetado. Ningun grafico depende del color para leerse --
   todos llevan el valor escrito al lado de la forma.
   ================================================================== */
.vk-grafico {
  margin: 0;
}

.vk-grafico__titulo {
  font-family: var(--vk-mono);
  font-size: var(--vk-fs-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-gold);
  margin-bottom: var(--vk-5);
  padding-bottom: var(--vk-3);
  border-bottom: 1px solid var(--vk-hair-dark);
}

.vk-grafico--claro .vk-grafico__titulo {
  color: var(--vk-gold-deep);
  border-color: var(--vk-hair);
}

.vk-grafico svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.vk-grafico__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-5);
  margin-bottom: var(--vk-4);
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vk-on-dark-2);
}

.vk-grafico--claro .vk-grafico__leyenda {
  color: var(--vk-ink-2);
}

.vk-grafico__leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vk-grafico__leyenda i {
  width: 11px;
  height: 11px;
  border-radius: 1px;
  display: inline-block;
}

.vk-grafico__remate {
  margin-top: var(--vk-5);
  padding-top: var(--vk-5);
  border-top: 1px solid var(--vk-hair-dark);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--vk-on-dark-2);
  max-width: 62ch;
}

.vk-grafico--claro .vk-grafico__remate {
  border-color: var(--vk-hair);
  color: var(--vk-ink-2);
}

/* El sello de dato de demostracion. Nunca se dibuja un numero de
   ejemplo sin este cartel al lado. */
.vk-demo-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--vk-4);
  font-size: 0.82rem;
  color: var(--vk-on-dark-2);
}

.vk-grafico--claro .vk-demo-linea,
.vk-paper-ctx .vk-demo-linea {
  color: var(--vk-ink-2);
}

.vk-paper-ctx .vk-demo-tag {
  color: var(--vk-gold-deep);
  border-color: rgba(126, 90, 18, 0.5);
}

/* ---- anillo ---- */
.vk-anillo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vk-7);
}

.vk-anillo svg {
  flex: none;
  width: 156px;
}

.vk-anillo__lista {
  display: grid;
  gap: 11px;
  min-width: 190px;
  flex: 1 1 190px;
}

.vk-anillo__lista li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 0.94rem;
  color: var(--vk-on-dark-2);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--vk-hair-dark);
}

.vk-grafico--claro .vk-anillo__lista li {
  color: var(--vk-ink-2);
  border-color: var(--vk-hair);
}

.vk-anillo__lista i {
  width: 12px;
  height: 12px;
  border-radius: 1px;
}

.vk-anillo__lista b {
  font-family: var(--vk-mono);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--vk-white);
}

.vk-grafico--claro .vk-anillo__lista b {
  color: var(--vk-ink);
}

/* ---- embudo ---- */
.vk-embudo {
  display: grid;
  gap: var(--vk-5);
}

.vk-embudo__cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vk-4);
  margin-bottom: 9px;
}

.vk-embudo__nombre {
  font-family: var(--vk-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--vk-white);
}

.vk-grafico--claro .vk-embudo__nombre {
  color: var(--vk-ink);
}

.vk-embudo__caida {
  font-family: var(--vk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--vk-on-dark-2);
}

.vk-grafico--claro .vk-embudo__caida {
  color: var(--vk-ink-2);
}

.vk-embudo__paso.is-critico .vk-embudo__caida {
  color: var(--vk-gold-hi);
  font-weight: 500;
}

.vk-grafico--claro .vk-embudo__paso.is-critico .vk-embudo__caida {
  color: var(--vk-gold-deep);
}

.vk-embudo__barra {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  overflow: hidden;
}

.vk-grafico--claro .vk-embudo__barra {
  background: rgba(20, 23, 26, 0.07);
}

.vk-embudo__barra span {
  display: block;
  height: 100%;
  border-radius: 1px;
}

.vk-embudo__paso.is-critico .vk-embudo__barra {
  outline: 1px solid rgba(231, 190, 114, 0.55);
  outline-offset: 2px;
}

.vk-embudo__detalle {
  margin-top: 9px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--vk-on-dark-2);
}

.vk-grafico--claro .vk-embudo__detalle {
  color: var(--vk-ink-2);
}

/* ---- indicadores ---- */
.vk-kpis {
  display: grid;
  gap: 1px;
  background: var(--vk-hair-dark);
  border: 1px solid var(--vk-hair-dark);
  border-radius: var(--vk-radius);
  overflow: hidden;
}

.vk-grafico--claro.vk-kpis {
  background: var(--vk-hair);
  border-color: var(--vk-hair);
}

@media (min-width: 720px) {
  .vk-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vk-kpi {
  background: var(--vk-graphite);
  padding: var(--vk-6) var(--vk-5);
  display: grid;
  gap: 8px;
  align-content: start;
}

.vk-grafico--claro .vk-kpi {
  background: var(--vk-white);
}

.vk-kpi__k {
  font-family: var(--vk-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vk-gold);
}

.vk-grafico--claro .vk-kpi__k {
  color: var(--vk-gold-deep);
}

.vk-kpi__v {
  font-family: var(--vk-display);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--vk-white);
}

.vk-grafico--claro .vk-kpi__v {
  color: var(--vk-ink);
}

.vk-kpi__d {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--vk-on-dark-2);
}

.vk-grafico--claro .vk-kpi__d {
  color: var(--vk-ink-2);
}

.vk-kpi__nota {
  grid-column: 1 / -1;
  background: var(--vk-graphite);
  padding: var(--vk-4) var(--vk-5);
  margin: 0;
}

.vk-grafico--claro .vk-kpi__nota {
  background: var(--vk-white);
}

/* ---- linea de tiempo normativa ----
   Aca no hay sello de demostracion: son fechas reales y cada hito lleva
   el enlace a su fuente. */
.vk-tiempo {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--vk-hair);
  margin-left: 6px;
}

.vk-grafico--oscuro.vk-tiempo {
  border-color: var(--vk-hair-dark);
}

.vk-tiempo__hito {
  position: relative;
  padding: 0 0 var(--vk-8) var(--vk-7);
}

.vk-tiempo__hito::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vk-paper);
  border: 1px solid var(--vk-gold-deep);
}

.vk-tiempo__hito.is-destacado::before {
  background: var(--vk-gold-deep);
  box-shadow: 0 0 0 4px rgba(182, 144, 78, 0.18);
}

.vk-grafico--oscuro .vk-tiempo__hito::before {
  background: var(--vk-graphite);
  border-color: var(--vk-gold);
}

.vk-grafico--oscuro .vk-tiempo__hito.is-destacado::before {
  background: var(--vk-gold);
}

.vk-tiempo__fecha {
  display: block;
  font-family: var(--vk-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vk-gold-deep);
  margin-bottom: 9px;
}

.vk-grafico--oscuro .vk-tiempo__fecha {
  color: var(--vk-gold);
}

.vk-tiempo__cuerpo h3 {
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  margin-bottom: 9px;
}

.vk-tiempo__cuerpo p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--vk-ink-2);
  max-width: 58ch;
}

.vk-grafico--oscuro .vk-tiempo__cuerpo p {
  color: var(--vk-on-dark-2);
}

.vk-tiempo__fuente {
  display: inline-block;
  margin-top: 11px;
  font-family: var(--vk-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  color: var(--vk-gold-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.vk-grafico--oscuro .vk-tiempo__fuente {
  color: var(--vk-gold);
}

/* ==================================================================
   CALCULADORA DEL COSTO DEL PROCESO MANUAL
   La pieza interactiva mas util del sitio: no muestra numeros de VASAK
   ni de nadie, calcula con los numeros que carga la persona que mira.
   Sin JavaScript queda una tabla con la formula escrita, que sigue
   sirviendo.
   ================================================================== */
.vk-calc {
  display: grid;
  gap: var(--vk-7);
}

@media (min-width: 900px) {
  .vk-calc {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
}

.vk-calc__campos {
  display: grid;
  gap: var(--vk-6);
}

.vk-calc__campo label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vk-4);
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vk-on-dark-2);
  margin-bottom: 12px;
}

.vk-calc__valor {
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vk-gold-hi);
  font-weight: 500;
}

.vk-calc__campo input[type='range'] {
  width: 100%;
  height: 26px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.vk-calc__campo input[type='range']::-webkit-slider-runnable-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}

.vk-calc__campo input[type='range']::-moz-range-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}

.vk-calc__campo input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--vk-gold-hi);
  border: 0;
}

.vk-calc__campo input[type='range']::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--vk-gold-hi);
  border: 0;
}

.vk-calc__campo input[type='range']:focus-visible {
  outline: 2px solid var(--vk-gold-hi);
  outline-offset: 4px;
}

.vk-calc__ayuda {
  margin-top: 9px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--vk-on-dark-2);
  opacity: 0.82;
}

.vk-calc__salida {
  border: 1px solid var(--vk-hair-dark);
  border-radius: var(--vk-radius);
  background: rgba(255, 255, 255, 0.02);
  padding: var(--vk-6);
}

.vk-calc__grande {
  display: block;
  font-family: var(--vk-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--vk-white);
}

.vk-calc__unidad {
  display: block;
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vk-gold);
  margin-top: 14px;
}

.vk-calc__desglose {
  margin-top: var(--vk-6);
  padding-top: var(--vk-5);
  border-top: 1px solid var(--vk-hair-dark);
  display: grid;
  gap: 11px;
}

.vk-calc__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vk-4);
  font-size: 0.93rem;
  color: var(--vk-on-dark-2);
}

.vk-calc__fila b {
  font-family: var(--vk-mono);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--vk-on-dark);
  white-space: nowrap;
}

.vk-calc__pie {
  margin-top: var(--vk-6);
  padding-top: var(--vk-5);
  border-top: 1px solid var(--vk-hair-dark);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--vk-on-dark-2);
}

/* ==================================================================
   FAMILIAS DE SERVICIOS
   ================================================================== */
.vk-familia + .vk-familia {
  margin-top: var(--vk-9);
}

.vk-familia__cab {
  display: grid;
  gap: var(--vk-3);
  padding-bottom: var(--vk-5);
  border-bottom: 1px solid var(--vk-hair);
  margin-bottom: var(--vk-2);
}

.vk-dark .vk-familia__cab,
.vk-darker .vk-familia__cab {
  border-color: var(--vk-hair-dark);
}

@media (min-width: 860px) {
  .vk-familia__cab {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--vk-8);
    align-items: baseline;
  }
}

.vk-familia__cab h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.028em;
}

.vk-familia__cab p {
  font-size: 0.99rem;
  line-height: 1.55;
  color: var(--vk-ink-2);
}

.vk-dark .vk-familia__cab p,
.vk-darker .vk-familia__cab p {
  color: var(--vk-on-dark-2);
}

/* ==================================================================
   MODELOS DE TRABAJO
   ================================================================== */
.vk-modelos {
  display: grid;
  gap: 1px;
  background: var(--vk-hair);
  border: 1px solid var(--vk-hair);
  border-radius: var(--vk-radius);
  overflow: hidden;
}

@media (min-width: 900px) {
  .vk-modelos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vk-modelo {
  background: var(--vk-white);
  padding: var(--vk-7) var(--vk-6) var(--vk-8);
  display: grid;
  gap: var(--vk-4);
  align-content: start;
  position: relative;
}

.vk-modelo.is-destacado {
  background: var(--vk-graphite);
  color: var(--vk-on-dark);
}

.vk-modelo.is-destacado h3 {
  color: var(--vk-white);
}

.vk-modelo.is-destacado p,
.vk-modelo.is-destacado li span {
  color: var(--vk-on-dark-2);
}

.vk-modelo.is-destacado .vk-dashlist li::before {
  background: var(--vk-gold);
}

.vk-modelo__n {
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vk-gold-deep);
  display: flex;
  justify-content: space-between;
  gap: var(--vk-4);
}

.vk-modelo.is-destacado .vk-modelo__n {
  color: var(--vk-gold);
}

.vk-modelo h3 {
  font-size: 1.45rem;
  letter-spacing: -0.028em;
  color: var(--vk-ink); /* no hereda el blanco de la banda oscura */
}

.vk-dark .vk-modelo h3,
.vk-darker .vk-modelo h3 {
  color: var(--vk-ink);
}

.vk-dark .vk-modelo.is-destacado h3,
.vk-darker .vk-modelo.is-destacado h3 {
  color: var(--vk-white);
}

.vk-modelo .vk-dashlist li span,
.vk-modelo__para {
  color: var(--vk-ink-2);
}

.vk-modelo.is-destacado .vk-dashlist li span,
.vk-modelo.is-destacado .vk-modelo__para {
  color: var(--vk-on-dark-2);
}

.vk-modelo .vk-dashlist li::before {
  background: var(--vk-gold-deep);
}

.vk-modelo__para {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--vk-ink-2);
}

.vk-modelo__pie {
  margin-top: var(--vk-4);
  padding-top: var(--vk-5);
  border-top: 1px solid var(--vk-hair);
  font-family: var(--vk-mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--vk-ink-2);
}

.vk-modelo.is-destacado .vk-modelo__pie {
  border-color: var(--vk-hair-dark);
  color: var(--vk-on-dark-2);
}

/* ==================================================================
   BLOQUE DE MARCA
   El unico lugar donde el isologo aprobado se muestra a tamano real.
   En la cabecera va el isotipo a 40 px y en el pie a 62 px: tamanos en
   los que el logotipo completo no se lee.
   ================================================================== */
.vk-marca__in {
  display: grid;
  gap: var(--vk-8);
  align-items: center;
}

@media (min-width: 900px) {
  .vk-marca__in {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(48px, 7vw, 110px);
  }
}

.vk-marca__logo img {
  width: min(380px, 74vw);
  height: auto;
  border-radius: var(--vk-radius);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.vk-marca__bajada {
  margin-top: var(--vk-6);
  padding-top: var(--vk-5);
  border-top: 1px solid var(--vk-hair-dark);
  color: var(--vk-gold);
  letter-spacing: 0.22em;
}

.vk-marca__dir {
  margin-top: var(--vk-5);
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--vk-on-dark-2);
}

.vk-marca__dir strong {
  color: var(--vk-on-dark);
}

.vk-marca__dir a {
  border-bottom: 1px solid rgba(182, 144, 78, 0.5);
  padding-bottom: 1px;
}

.vk-marca__dir a:hover {
  color: var(--vk-gold-hi);
}

.vk-marca__foto {
  margin-top: var(--vk-6);
}

/* ==================================================================
   FUENTES
   Un dato de mercado sin su fuente al lado es una afirmacion. Con la
   fuente es una cita, y se puede discutir.
   ================================================================== */
.vk-fuentes {
  margin-top: var(--vk-8);
  padding-top: var(--vk-6);
  border-top: 1px solid var(--vk-hair);
}

.vk-dark .vk-fuentes,
.vk-darker .vk-fuentes {
  border-color: var(--vk-hair-dark);
}

.vk-fuentes > .vk-mono {
  color: var(--vk-gold-deep);
  margin-bottom: var(--vk-4);
}

.vk-dark .vk-fuentes > .vk-mono,
.vk-darker .vk-fuentes > .vk-mono {
  color: var(--vk-gold);
}

.vk-fuentes ul {
  display: grid;
  gap: 10px;
  max-width: 76ch;
}

.vk-fuentes li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--vk-ink-2);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--vk-hair);
}

.vk-dark .vk-fuentes li,
.vk-darker .vk-fuentes li {
  color: var(--vk-on-dark-2);
  border-color: var(--vk-hair-dark);
}

.vk-fuentes li a {
  font-family: var(--vk-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--vk-gold-deep);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

.vk-dark .vk-fuentes li a,
.vk-darker .vk-fuentes li a {
  color: var(--vk-gold);
}

.vk-fuentes__aviso {
  margin-top: var(--vk-5);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--vk-ink-2);
  max-width: 68ch;
  opacity: 0.9;
}

.vk-dark .vk-fuentes__aviso,
.vk-darker .vk-fuentes__aviso {
  color: var(--vk-on-dark-2);
}

/* ==================================================================
   BANDA DE PARAGUAY A SANGRE
   Una foto real del pais, ancha y clara, como respiro entre secciones.
   ================================================================== */
.vk-pais {
  position: relative;
  overflow: hidden;
  background: var(--vk-paper-2);
}

.vk-pais img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vk-pais__pie {
  padding-block: var(--vk-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--vk-3) var(--vk-6);
  align-items: baseline;
  justify-content: space-between;
}

.vk-pais__pie p {
  font-family: var(--vk-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vk-ink-2);
}

.vk-pais__pie p:first-child {
  color: var(--vk-gold-deep);
}