/* Russian layout polish. The original composition stays intact; only text geometry changes. */

.text,
.titulos3,
.experiment {
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}

.hotspicy {
  display: none;
}

/* Give Й and other Cyrillic accents room without disabling the reveal animation. */
#landing .hero-static .char,
.titulos2 .char,
.titulos3 .char,
.experiment .char,
#motioninner .char {
  height: 1.2em;
  margin-top: -0.16em;
  padding-top: 0.16em;
}

@media screen and (min-width: 1025px) {
  #aesthetics h2,
  #disruptive h2 {
    font-size: clamp(76px, 8.15vw, 150px);
    line-height: 0.88;
  }

  #aesthetics h2 {
    left: 10vw;
    width: 80vw;
  }

  .experiment {
    left: 17vw;
    line-height: 1.04;
    text-align: center;
    width: 66vw;
  }

  #dry,
  #oriented {
    display: none;
  }

  #motion h2 {
    padding-top: 0.14em;
  }

  #motioninner {
    padding-top: 0.06em;
  }

  #motion h3 {
    line-height: 1.05;
    width: 58vw;
    left: 21vw;
  }

  #disruptive h2 {
    left: 6vw;
    width: 88vw;
  }

  #disruptive h2 > div {
    white-space: nowrap;
  }

  #disruptive h2 > div:first-child {
    align-items: baseline;
    display: flex;
    gap: 0.16em;
    justify-content: flex-end;
  }

  #disruptive h3 {
    left: 12.5vw;
    line-height: 1.04;
    top: 4.5vw;
    width: 25vw;
  }

  #disruptivetext {
    left: 43.5vw;
    width: 32vw;
  }

  /* Cards: wider Russian columns, readable type, no overlap with the barcode. */
  #marco1,
  #marco3,
  #marco4 {
    min-width: 21.5vw;
  }

  #marco2 {
    min-width: 29vw;
  }

  .table,
  .abajodch,
  .lat,
  .lat2 {
    font-size: clamp(9px, 0.66vw, 13px);
  }

  .table,
  .abajodch {
    line-height: 1.08;
  }

  .table table {
    table-layout: fixed;
    width: 11.8vw;
  }

  .table th:first-child,
  .table td:first-child {
    padding-right: 0.35vw;
    white-space: nowrap;
    width: 8.7vw;
  }

  .table th:last-child,
  .table td:last-child {
    width: 3.1vw;
  }

  .barcode_prod,
  .lightbeep {
    width: 11.8vw;
  }

  .abajodch {
    height: 6.6vw;
    width: 9.2vw;
  }

  .etiqueta .lat {
    bottom: calc(100% + 0.7vw);
    height: auto;
    left: 0.7vw !important;
    line-height: 1;
    top: auto !important;
    transform: rotate(180deg);
    transform-origin: center;
    white-space: nowrap;
    width: auto;
    writing-mode: vertical-rl;
    z-index: 5;
  }

  .etiqueta .lat2 {
    height: auto;
    left: auto;
    line-height: 1;
    right: 0.7vw;
    top: 0.7vw;
    transform: none;
    white-space: nowrap;
    width: auto;
    writing-mode: vertical-rl;
    z-index: 5;
  }

  #clients .titulos2 {
    font-size: clamp(76px, 7.7vw, 142px);
    left: 9vw;
    line-height: 0.86;
    margin-top: 4vw;
    width: 82vw;
  }

  #clients .brave,
  #clients .unique,
  #clients .noboring {
    font-size: clamp(10px, 0.7vw, 13px);
    position: absolute;
    top: 5vw;
    transform: none;
    white-space: nowrap;
    width: auto;
  }

  #clients .brave {
    left: 12vw;
  }

  #clients .unique {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  #clients .noboring {
    left: auto;
    right: 12vw;
    text-decoration: none;
  }

  #clienttext {
    left: 15vw;
    width: 70vw;
  }

  #clienttext p {
    line-height: 1.15;
  }
}

/* Restore the lighter editorial rhythm of the original composition. */
h1,
h2,
h3,
.titulos2,
.titulos3,
.experiment,
#final2 button {
  font-weight: 200;
}

#landing .hero-static {
  font-weight: 200 !important;
}

@media screen and (min-width: 1025px) {
  #aesthetics h2,
  #disruptive h2 {
    font-size: clamp(68px, 7.35vw, 132px);
    font-weight: 200;
    line-height: 0.9;
  }

  #motion h2 {
    font-size: clamp(76px, 8.65vw, 150px);
    font-weight: 200;
    line-height: 0.88;
  }

  #clients .titulos2 {
    font-size: clamp(76px, 8.65vw, 150px);
    font-weight: 200;
    left: 12vw;
    line-height: 0.86;
    margin-top: 2.5vw;
    white-space: normal;
    width: 76vw;
  }

  #imginside7 { background-image: url('/img/grupo_encajaregistradora.jpg?v=1'); }
  #imginside8 { background-image: url('/img/bolsaplastico_mano.jpg?v=1'); }
  #imginside9 { background-image: url('/img/carrito_productos.jpg?v=1'); }
  #imginside11 { background-image: url('/img/lata_escanear.jpg?v=1'); }

  #final h2 {
    font-size: clamp(70px, 7.6vw, 132px);
    font-weight: 200;
    line-height: 0.86;
    left: 10vw;
    width: 80vw;
  }

  #final2 button {
    align-items: center;
    display: flex;
    font-size: clamp(52px, 5.5vw, 96px);
    font-weight: 200;
    height: 16vh;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
  }

  /* Keep the Russian lateral copy on the original animation stops. */
  #lat1 { flex: 0 0 69.7vw; }
  #lat2 { flex: 0 0 22.4vw; }
  #lat3 { flex: 0 0 44.9vw; }
  #lat4 { flex: 0 0 31.4vw; }
  #lat42 { flex: 0 0 7.6vw; }
  #lat5 { flex: 0 0 60vw; }
  #lat6 { flex: 0 0 61.2vw; }
  #lat7 { flex: 0 0 63.8vw; }
}