/* ==========================================================================
   NEROVEM — capa propia sobre el CSS compilado original.
   Se carga DESPUES de original.css: solo sobreescribe o anade, no reordena el DOM
   que usan los triggers de GSAP.
   ========================================================================== */

:root {
  --nv-yellow: #EFFF00;
  --nv-ink: #000;
  --nv-paper: #fff;
  --nv-wa: #25D366;
}

/* ---------- utilidades y accesibilidad ---------- */
.nv-email { text-transform: none !important; user-select: text; -webkit-user-select: text; }
a.nv-email:hover, a.nv-wa-link:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--nv-ink); outline-offset: 3px; }
#aceptar:focus-visible { outline-offset: -8px; }

.nv-skip {
  position: fixed; top: 0; left: 0; z-index: 999999999; transform: translateY(-120%);
  background: var(--nv-yellow); color: var(--nv-ink); padding: 10px 16px;
  font: 14px/1 HaasR, Arial, sans-serif; text-transform: uppercase;
}
.nv-skip:focus { transform: none; }
#content:focus { outline: none; }

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- logo (mascara alfa: toma el color del texto, sin caja blanca) ---------- */
.nv-logo {
  background-color: currentColor; aspect-ratio: 636 / 111;
  -webkit-mask: url(../brand/nerovem-logo-mask.png) center / contain no-repeat;
  mask: url(../brand/nerovem-logo-mask.png) center / contain no-repeat;
}
.nv-logo--loader { width: 16vw; color: #111; animation: nv-pulse 1.6s ease-in-out infinite; }
@keyframes nv-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* ---------- linea de marca ---------- */
#superiorstart, #superior { width: 30vw; left: 35vw; white-space: nowrap; }

/* ---------- selector de idioma ---------- */
#nv-lang {
  position: fixed; top: .5vw; right: 12.7vw; left: auto; z-index: 100; display: flex;
  height: 1.8vw; border: 1px solid var(--nv-ink); border-radius: 3vw; overflow: hidden;
  font-family: HaasR; font-size: var(--p4); text-transform: uppercase; background: transparent;
}
#nv-lang button {
  border: 0; background: transparent; padding: 0 .7vw; height: 100%; line-height: 1;
  display: flex; align-items: center; transition: background .3s ease, color .3s ease;
}
#nv-lang button[aria-pressed="true"] { background: var(--nv-ink); color: #fff; }
#nv-lang button:not([aria-pressed="true"]):hover { background: var(--nv-yellow); }
#nv-lang button:focus-visible { outline-offset: -3px; outline-color: var(--nv-yellow); }
#nv-lang button:not([aria-pressed="true"]):focus-visible { outline-color: var(--nv-ink); }

/* ---------- CTA global amarillo ---------- */
#fixworks {
  width: 11.6vw; background: var(--nv-yellow); border-color: var(--nv-ink); color: var(--nv-ink);
}
#fixworks #selected, #fixworks:hover #selected { opacity: 1 !important; }
#fixworks:hover, #fixworks.open:hover, .nv-cta-link:focus-visible #fixworks {
  background: var(--nv-ink); color: var(--nv-yellow); border-color: var(--nv-ink);
}
#fixworks:hover img, .nv-cta-link:focus-visible #fixworks img { filter: invert(1); }
.nv-cta-link:focus-visible { outline: none; }
.nv-cta-link:focus-visible #fixworks, .nv-cta-link:focus-visible #worksmov { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--nv-ink); }

/* ---------- portada ---------- */
.tit { width: 90vw; }
html[data-lang="km"] h1.tit { font-size: 6.8vw; }
#att { width: 2.3vw; height: 2.3vw; border-radius: .45vw; margin: 0 .8vw; top: .2vw; }
#titmov .nv-h1mov { font-family: HaasT; text-transform: uppercase; line-height: .9; }

/* ---------- manifiesto ---------- */
.nv-manifesto { font-size: 3vw; text-transform: uppercase; font-family: HaasR; font-weight: lighter; line-height: 1.05; }
#large1, #large2 { align-items: center; }
.nv-words { display: contents; }
#reg { font-size: 4vw; line-height: 1; top: 0; }
#intext { top: 0; width: 7vw; }
#recycle, #recycle2 { margin: 0 -.9vw; }
#textos1 { justify-content: center; }
#textos1 p { width: 50%; }

/* ---------- escenas: un solo parrafo, mismas alturas que el original ---------- */
#tercera { min-height: 65.2vw; justify-content: flex-start; }
#tercera h2 { width: 80vw; }
#textos2 { justify-content: center; }
#aesthetics { min-height: 76.6vw; }
#aesthetics-textos { height: 8vw; }
.experiment { text-align: left; }
#motion { min-height: 62.1vw; }
.cooltext { height: 6vw; }
#disruptive { min-height: 42.8vw; }
#disruptive h3 { width: 30vw; }
#primernum .nv-eyebrow-t { display: block; font-size: var(--p4); }
.hotspicy { width: 26vw; }
h3 { line-height: 1; }
/* los acentos de las mayusculas necesitan aire dentro de las mascaras de SplitText */
.char, .tit2 { padding-top: .16em; margin-top: -.16em; }
.word, .tit3, .line { padding-top: .3em; margin-top: -.3em; }

/* ---------- tarjeta-etiqueta ---------- */
.table td:last-child, .table th:last-child { width: 3vw; }
.click { font-family: HaasR; }
.table td:first-child, .table th:first-child { white-space: nowrap; }

/* ---------- marquesinas con periodo medido por JS ---------- */
.nv-mq {
  display: flex !important; width: max-content !important; white-space: nowrap;
  animation: nv-mq var(--nv-dur, 20s) linear infinite !important; transform: translateX(0);
}
.nv-mq-u { flex: none; white-space: nowrap; padding-right: .3em; display: inline-flex; align-items: center; }
@keyframes nv-mq { from { transform: translateX(0) } to { transform: translateX(calc(-1 * var(--nv-loop, 50%))) } }
.pantallas.nv-mq:not(.on) { display: none !important; }

/* ---------- ticket ---------- */
#ticket { font-size: .73vw; line-height: .912vw; transform: translateY(105%); }
/* el ticket asoma por tramos medidos desde su borde superior, sea cual sea su altura */
#ticket.start { transform: translateY(calc(100% - 4.8vw)); }
#ticket.prod1 { transform: translateY(calc(100% - 8vw)); }
#ticket.prod2 { transform: translateY(calc(100% - 10.5vw)); }
#ticket.prod3 { transform: translateY(calc(100% - 13.5vw)); }
#ticket.prod4 { transform: translateY(calc(100% - 16vw)); }
#ticket.final { transform: translateY(0); }
#ticket a { color: inherit; }
.nv-t-up, .nv-t-center { text-transform: uppercase; }
.nv-t-center { display: inline-block; width: 100%; text-align: center; }
.nv-t-row { display: inline-flex; justify-content: space-between; width: calc(100% - .5vw); }

/* ---------- EJEMPLOS: telon claro que sustituye al bloque negro ---------- */
#clients {
  background: var(--nv-paper); color: var(--nv-ink); height: auto; min-height: 150vh;
  padding: 5vw 0 6vw; border: 1px solid var(--nv-ink);
}
.nv-work { width: 76vw; margin-left: 12vw; }
.nv-work-eyebrow {
  display: flex; justify-content: space-between; border-bottom: 1px solid; padding-bottom: .8vw;
  font-size: var(--p4); text-transform: uppercase;
}
#clients .nv-work-title {
  width: auto; left: 0; text-align: left; display: block; font-family: HaasT; font-size: 6.4vw;
  line-height: 1; text-transform: uppercase; margin: 3vw 0 2.2vw;
}
.nv-work-sub { font-size: var(--p3); line-height: 1.05; text-transform: uppercase; width: 38vw; }
.nv-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 5vw;
  border-top: 1px solid; border-left: 1px solid;
}
.nv-card { border-right: 1px solid; border-bottom: 1px solid; }
.nv-card a {
  display: flex; flex-direction: column; min-height: 19.5vw; padding: 1.1vw; height: 100%;
  transition: background .3s ease; text-transform: uppercase; font-family: HaasR;
}
.nv-card-top { display: flex; justify-content: space-between; font-size: var(--p4); line-height: 1; }
.nv-card-cat { text-align: right; }
.nv-card-name { font-family: HaasT; font-size: 2.5vw; line-height: .95; margin-top: 4.2vw; }
.nv-card-desc { font-size: var(--p4); line-height: 1.1; margin-top: .9vw; flex: 1; }
.nv-card-cta {
  display: flex; justify-content: space-between; align-items: center; font-size: var(--p4);
  line-height: 1; border-top: 1px solid; padding-top: .8vw; margin-top: 1.4vw;
}
.nv-card-cta img { width: 1.5vw; height: 1.5vw; margin-right: -.3vw; transition: transform .3s ease; }
.nv-card a:focus-visible { background: var(--nv-yellow); outline-offset: -2px; }
.nv-card a:focus-visible .nv-card-cta img { transform: translate(.2vw, -.2vw); }
@media (hover: hover) {
  .nv-card a:hover { background: var(--nv-yellow); }
  .nv-card a:hover .nv-card-cta img { transform: translate(.2vw, -.2vw); }
}
.nv-work-note { font-size: var(--p4); line-height: 1.1; text-transform: uppercase; margin-top: 1.4vw; opacity: .62; }

#link { margin-top: 8vw; background: var(--nv-ink); color: #fff; border: 1px solid var(--nv-ink); }
#link .flecha div { background: currentColor; }
#link:hover, #nv-pill-link:focus-visible #link { background: var(--nv-yellow); color: var(--nv-ink); border-color: var(--nv-ink); }
#link:hover .flecha div { background: currentColor; }
#nv-pill-link:focus-visible { outline: none; }
#nv-pill-link:focus-visible #link { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--nv-ink); }

/* ---------- cierre: contacto ---------- */
#final h2 { font-size: 6vw; line-height: .92; padding-top: 3.6vw; }
#open24 { align-items: center; }
#links ul { width: auto; gap: 2.4vw; }
#links a:hover { text-decoration: underline; }
.nv-contact {
  position: absolute; top: auto; bottom: 1vw; left: 20vw; width: 60vw; z-index: 9;
  display: flex; flex-direction: column; align-items: center; gap: .9vw; text-align: center;
}
.nv-contact-p { font-size: var(--p4); }
.nv-mail { display: flex; align-items: center; gap: .9vw; font-size: var(--p3); line-height: 1; text-transform: none; }
#final2 .nv-copy {
  position: relative; bottom: auto; margin: 0; font-size: inherit;
  width: 1.8vw; height: 1.8vw; border-radius: 100%; border: 1px solid; background: transparent;
  display: flex; justify-content: center; align-items: center; transition: .3s ease;
}
.nv-copy img { width: 1.5vw; transform: rotate(90deg); transition: .3s ease; }
.nv-copy:hover { background: var(--nv-ink); }
.nv-copy:hover img { filter: invert(1); }
.nv-copied { font-size: var(--p4); text-transform: uppercase; min-width: 8vw; text-align: left; position: absolute; left: 100%; margin-left: .8vw; white-space: nowrap; }
.nv-wa {
  display: flex; align-items: center; justify-content: center; gap: 1.4vw; width: 60vw; height: 8.6vw;
  border-radius: 9vw; border: 1px solid var(--nv-ink); background: #dededd; color: var(--nv-ink);
  font-family: HaasT; font-size: 3.9vw; line-height: 1; text-transform: uppercase; transition: .3s ease;
}
.nv-wa-ico { width: 4vw; height: 4vw; flex: none; }
.nv-wa:hover, .nv-wa:focus-visible { background: var(--nv-ink); color: #dbdad9; }
#final2 .nv-full {
  position: relative; bottom: auto; margin: 0; width: auto; font-family: HaasR;
  border: 1px solid var(--nv-ink); border-radius: 3vw; background: var(--nv-yellow); padding: .5em 1.2em;
  font-size: var(--p4); text-transform: uppercase;
}
.nv-full[hidden] { display: none; }
#backtop:focus-visible { outline-offset: 6px; }

/* ==========================================================================
   MOVIL / TABLET VERTICAL (misma media query que el original)
   ========================================================================== */
@media screen and (max-width: 1024px) and (orientation: portrait) {
  #lateral, #nv-fixworks-link { display: none; }
  .nv-logo--loader { width: 46vw; }

  #nv-lang { top: 2vw; right: 2vw; height: 7vw; min-height: 28px; font-size: 12px; background: #fff; z-index: 99999; }
  #nv-lang button { padding: 0 3vw; }

  /* barra inferior: pantalla | INFO | VER EJEMPLOS (amarillo) */
  #pantalla { width: auto; flex: 1; min-width: 0; }
  #infosmov, #worksmov { white-space: nowrap; flex: none; cursor: pointer; }
  #worksmov { background: var(--nv-yellow); color: var(--nv-ink); border-color: var(--nv-ink); }
  .nv-cta-link { flex: none; display: block; }
  .pantallas.on.nv-mq { left: 4vw; }

  /* Escanear: amarillo fosforito, texto negro */
  .click {
    background: var(--nv-yellow); color: var(--nv-ink); border: 2px solid var(--nv-ink);
    width: auto; min-width: 24.5vw; white-space: nowrap; line-height: 1; padding: 0 3vw;
  }
  .table td:last-child, .table th:last-child { width: 9.5vw; }

  #titmov { top: 11vw; }
  #segundo { top: 34vw; }
  #titmov .nv-h1mov { position: absolute; left: 0; top: 0; font-size: 25vw; }
  
  #textos1 p { width: 100%; }
  #tercera, #aesthetics, #motion, #disruptive { min-height: 0; }
  #tercera h2 { width: 100vw; }
  #aesthetics-textos, .cooltext { height: 0; }
  #disruptive h3 { width: auto; }
  .experiment { font-size: 5.2vw; }

  #ticket, #ticket.start, #ticket.prod1, #ticket.prod2, #ticket.prod3, #ticket.prod4, #ticket.final { transform: translateY(110%); }
  #ticket { font-size: 3.2vw; line-height: 3.96vw; }
  #ticket.up { transform: translateY(0); }
  .nv-t-row { width: calc(100% - 2vw); }

  #clients { min-height: 0; height: auto; padding: 12vw 0 14vw; border-radius: 5vw; }
  .nv-work { width: 92vw; margin-left: 4vw; }
  .nv-work-eyebrow { padding-bottom: 2.5vw; }
  #clients .nv-work-title { font-size: 11.2vw; margin: 8vw 0 5vw; display: block !important; width: auto !important; left: 0 !important; }
  .nv-work-sub { font-size: 4.4vw; width: 84vw; }
  .nv-grid { grid-template-columns: 1fr; margin-top: 10vw; border-left: 0; }
  .nv-card { border-right: 0; }
  .nv-card a { min-height: 0; padding: 4.5vw 0 4vw; }
  .nv-card-name { font-size: 9vw; margin-top: 4vw; }
  .nv-card-desc { margin-top: 2vw; }
  .nv-card-cta { border-top: 0; padding-top: 0; margin-top: 3.5vw; justify-content: flex-start; gap: 2vw; }
  .nv-card-cta img { width: 4.5vw; height: 4.5vw; margin: 0; }
  .nv-work-note { margin-top: 5vw; }
  #link { position: relative; top: auto; left: 1vw; margin-top: 10vw; }

  #final h2 { font-size: 10.4vw; }
  #open24 { top: -15vw; width: 70vw; flex-direction: column; align-items: flex-start; gap: 1.5vw; }
  #links ul { gap: 5vw; }
  .nv-contact { left: 2vw; width: 96vw; bottom: 15vw; gap: 3vw; }
  .nv-mail { font-size: 5.4vw; gap: 3vw; }
  #final2 .nv-copy { width: 9vw; height: 9vw; }
  .nv-copy img { width: 7vw; }
  .nv-copied { position: static; margin: 0; min-width: 0; font-size: 12px; }
  .nv-wa {
    width: 96vw; height: auto; padding: 5vw 6vw; border-radius: 9vw; background: #fff; font-size: 8.6vw;
    gap: 3vw; text-align: left; justify-content: space-between;
  }
  .nv-wa-ico { width: 12vw; height: 12vw; }
  #final2 .nv-full { border-radius: 9vw; font-size: 12px; }
}

/* ==========================================================================
   Aviso para pantallas pequenas en horizontal (la experiencia movil es vertical)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nv-logo--loader { animation: none; }
}

/* ==========================================================================
   RONDA 2 — ajustes finos de encaje (escritorio y movil)
   ========================================================================== */

/* numeros #01-#04: caben enteros dentro de su ventana */
.numero { font-size: 2.4vw; width: 5.3vw; height: 2.35vw; padding-top: .34vw; top: .15vw; left: .25vw; }
#marco1 .numeroinner { position: absolute; left: 5.3vw; top: 0; margin: 0; }
#marco3 .numeroin { justify-content: flex-end; }
#marco3 .numeroinner { position: absolute; left: -5.7vw; top: 0; margin: 0; }
#marco2 .numeroinner { margin-bottom: 1.32vw; }

/* rotulos verticales de la tarjeta: anclados, nunca pisan el codigo de barras */
.lat, #marco2 .lat, #marco3 .lat, #marco4 .lat {
  writing-mode: vertical-rl; transform: none; left: .15vw; top: auto; bottom: calc(100% + .8vw);
  white-space: nowrap; line-height: 1;
}
.lat2 { writing-mode: vertical-rl; transform: none; top: .8vw; right: .5vw; left: auto; white-space: nowrap; line-height: 1.15; }

/* escena 03: el titular en cinta se lee casi entero de un vistazo */
#motion h2 { width: 100vw; left: 0; font-size: 5.6vw; margin-top: 19vw; }
#motion .imginside5 { width: 6vw; height: 4.4vw; margin: 0 1.6vw; }

/* escena 04: parrafo legible */
#disruptivetext { width: 36vw; }
#disruptivetext p { font-size: 1.3vw; line-height: 1.14; }

/* ejemplos con preview real */
.nv-card a { padding: 0; min-height: 0; }
.nv-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid; background: #ecebe9; }
.nv-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.nv-card-top { padding: 1vw 1.1vw 0; }
.nv-card-name { font-size: 2.1vw; margin: 1.5vw 1.1vw 0; }
.nv-card-desc { margin: .7vw 1.1vw 0; }
.nv-card-cta { margin: 1.3vw 1.1vw 1.1vw; }
#clients .nv-work-title { line-height: 1.08; }
.table td:last-child, .table th:last-child { width: 2.3vw; }
.nv-card a:focus-visible .nv-card-img img { transform: scale(1.05); }
@media (hover: hover) { .nv-card a:hover .nv-card-img img { transform: scale(1.05); } }

/* cinta "Hablemos de tu proyecto": cabe la frase completa */
#link { width: 60vw; left: 20vw; }

/* WhatsApp: boton blanco de borde limpio + insignia verde */
.nv-wa { background: #fff; gap: 1.6vw; }
.nv-wa-badge {
  width: 5.6vw; height: 5.6vw; border-radius: 50%; background: var(--nv-wa); flex: none;
  display: flex; align-items: center; justify-content: center; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.nv-wa-badge svg { width: 64%; height: 64%; display: block; }
.nv-wa:hover .nv-wa-badge, .nv-wa:focus-visible .nv-wa-badge { transform: scale(1.1) rotate(-8deg); }

@media screen and (max-width: 1024px) and (orientation: portrait) {
  /* portada: titular fijo, completo y legible al instante */
  #titmov { display: none; }
  h1.tit {
    display: block !important; position: absolute; top: 15vw; left: 2vw; width: 96vw; text-align: center;
    font-size: 9.6vw !important; line-height: .94;
  }
  html[data-lang="en"] h1.tit { font-size: 13.4vw !important; }
  #segundo { top: 36vw; }
  html[data-lang="en"] #segundo { top: 43vw; }

  /* indice Concepto / Diseno / Experiencia / Proceso con presencia */
  #inferior { width: 92vw; left: 4vw; font-size: 4.2vw; margin-top: 4vw; overflow: visible; }
  #inferiorinner { width: 92vw; flex-direction: column; }
  #inferior div#inferiorinner { opacity: 1; }
  #inferiorinner > div { opacity: 1; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid; padding: 2.4vw 0; line-height: 1; }
  #inferiorinner > div:last-child { border-bottom: 1px solid; }
  #inferior span { font-size: inherit; top: 0; margin: 0; }

  /* rotulo de cada escena: una linea clara encima del titular */
  #primernum, .interactive, .websites, .communication {
    position: absolute; top: -13vw; left: 4vw; right: auto; width: 92vw; height: auto; margin: 0; padding: 2.4vw 0 0;
    border: 0; border-top: 1px solid; border-radius: 0; font-size: 4.2vw; line-height: 1; text-align: left;
    display: flex; flex-direction: row; justify-content: space-between; opacity: 1; z-index: 2; text-transform: uppercase;
  }
  #primernum { flex-direction: row-reverse; top: -13vw; }
  #primernum span, #primernum .nv-eyebrow-t { display: inline; font-size: inherit; }
  .interactive::after { content: "#02"; }
  .websites::after { content: "#03"; }
  .communication::after { content: "#04"; }
  #tercera h2 { margin-top: 0; }

  /* escena 02: sin solapes */
  .hotspicy { position: relative; top: auto; right: auto; left: 2vw; width: 92vw; text-align: left; margin-top: 6vw; }
  .hotspicy .tit3 { text-align: left !important; }
  .numdos { display: none; }
  #aesthetics-textos { margin-top: 6vw; }

  /* escena 03 */
  #motion h2 { font-size: 11vw; margin-top: 5vw; }
  #disruptivetext { width: 96vw; }
  #disruptivetext p { font-size: var(--p4); line-height: 1.1; }

  /* tarjetas: numero entero, rotulos anclados y franja de datos opaca (el envase queda detras) */
  .numero { font-size: 5.6vw; width: 17vw; height: 6.6vw; padding-top: 1vw; top: 1vw; left: 1.2vw; }
  .numeroinner { display: none; }
  #marco2 .numeroin, #marco3 .numeroin { transform: none; margin: 0; }
  .lat, #marco2 .lat, #marco3 .lat, #marco4 .lat { left: .4vw; bottom: calc(100% + 3vw); }
  .lat2 { top: 3vw; right: 1.5vw; }
  #marco1::before, #marco2::before, #marco3::before, #marco4::before {
    content: ""; position: absolute; left: -2vw; right: -2vw; bottom: -2vw; height: 39vw;
    background: rgba(255, 255, 255, .93); border-top: 1px solid;
  }

  /* ejemplos */
  .nv-card { border-bottom: 0; }
  .nv-card a { padding: 0 0 11vw; }
  .nv-card-img { border: 1px solid; border-radius: 3vw; }
  .nv-card-top { padding: 3.2vw 0 0; }
  .nv-card-name { font-size: 9vw; margin: 3.4vw 0 0; }
  .nv-card-desc { margin: 2vw 0 0; }
  .nv-card-cta { margin: 3.2vw 0 0; }
  #link { width: 90vw; left: 1vw; }
  #specialprojects { font-size: 4.6vw; line-height: 2.1; }

  /* cierre: bloque de contacto compacto, con aire respecto al carro */
  .nv-contact { bottom: 15vw; gap: 2.6vw; }
  .nv-contact-p { display: none; }
  .nv-mail { font-size: 4.8vw; }
  #final2 .nv-copy { width: 8vw; height: 8vw; }
  .nv-wa { padding: 2.8vw 2.8vw 2.8vw 6vw; font-size: 5.7vw; white-space: nowrap; gap: 2vw; }
  .nv-wa-badge { width: 13vw; height: 13vw; }
}

/* ==========================================================================
   JEMER (km) — la escritura jemer apila signos encima y debajo de la linea:
   necesita mas interlineado, mascaras mas altas y nada de justificado por palabras.
   El ingles conserva todos los valores originales.
   ========================================================================== */
html[lang="km"] { --p1: 6.2vw; --p4: .95vw; --p5: .72vw; }
html[lang="km"] h1, html[lang="km"] h2 { line-height: 1.34; }
html[lang="km"] h3 { line-height: 1.42; }
html[lang="km"] h4, html[lang="km"] p, html[lang="km"] .abajodch, html[lang="km"] .table,
html[lang="km"] #inferior, html[lang="km"] #open24, html[lang="km"] .nv-card-desc, html[lang="km"] .nv-card-cta,
html[lang="km"] #scroll, html[lang="km"] #intext, html[lang="km"] #eco { line-height: 1.5; }
html[lang="km"] .char, html[lang="km"] .tit2 { padding: .46em 0 .4em; margin: -.46em 0 -.4em; }
html[lang="km"] .word, html[lang="km"] .tit3, html[lang="km"] .line { padding: .55em 0 .5em; margin: -.55em 0 -.5em; }
html[lang="km"] .linein, html[lang="km"] .line:last-child .linein { display: block !important; }
html[lang="km"] .text, html[lang="km"] .experiment { text-align: left; }
html[lang="km"] .charin { transform: translateY(14vw); }

html[lang="km"] #superiorstart, html[lang="km"] #superior { width: 34vw; left: 33vw; }
html[lang="km"] #superiormask, html[lang="km"] #superiormask2 { height: 1.7vw; }
html[lang="km"] #superiormask div { transform: translateY(1.8vw); }
html[lang="km"] #segundo { height: 5.4vw; }
html[lang="km"] #landing h3 { transform: translateY(5.6vw); }
html[lang="km"] .nv-manifesto { font-size: 2.6vw; line-height: 1.6; }
html[lang="km"] #intext { width: 8vw; }
html[lang="km"] #tercera h2 { width: 84vw; }
html[lang="km"] #motion h2 { font-size: 4.6vw; line-height: 1.6; }
html[lang="km"] .experiment { font-size: 2.3vw; }
html[lang="km"] #lateral { line-height: 1.5; font-size: 2.3vw; }
html[lang="km"] #lat2 { font-size: 1.3vw; margin-top: .9vw; }
html[lang="km"] #lat42 { line-height: 1.5; margin-top: .4vw; }
html[lang="km"] #latcopyright { line-height: 1.5; }
html[lang="km"] .table td:first-child, html[lang="km"] .table th:first-child { white-space: nowrap; width: auto; padding-right: .8vw; }
html[lang="km"] .table td:last-child, html[lang="km"] .table th:last-child { width: auto; }
html[lang="km"] .purchased { width: auto; min-width: 6.3vw; padding: .1vw .6vw; line-height: 1.5; }
html[lang="km"] .lat, html[lang="km"] .lat2 { line-height: 1.5; }
html[lang="km"] #fixworks #selected { top: .15vw; }
html[lang="km"] #nv-lang button { line-height: 1.5; }
html[lang="km"] #clients .nv-work-title { font-size: 5.2vw; line-height: 1.36; }
html[lang="km"] .nv-work-sub { line-height: 1.5; width: 44vw; }
html[lang="km"] .nv-work-eyebrow { line-height: 1.5; }
html[lang="km"] #specialprojects { line-height: 1.8; }
html[lang="km"] #final h2 { font-size: 5vw; line-height: 1.36; padding-top: 2.6vw; }
html[lang="km"] .nv-wa { font-size: 3.3vw; line-height: 1.5; }
html[lang="km"] #backtop { line-height: 1.4; font-size: 2.1vw; }
html[lang="km"] #aceptar div { width: 4.6vw; height: 4.6vw; line-height: 1.4; }
/* ticket: lineas mas altas y tramos de salida proporcionales */
html[lang="km"] #ticket { font-size: .7vw; line-height: 1.08vw; }
html[lang="km"] #ticket.start { transform: translateY(calc(100% - 5.5vw)); }
html[lang="km"] #ticket.prod1 { transform: translateY(calc(100% - 9.3vw)); }
html[lang="km"] #ticket.prod2 { transform: translateY(calc(100% - 12.3vw)); }
html[lang="km"] #ticket.prod3 { transform: translateY(calc(100% - 15.8vw)); }
html[lang="km"] #ticket.prod4 { transform: translateY(calc(100% - 18.8vw)); }
html[lang="km"] #ticket.final { transform: translateY(0); }

@media screen and (max-width: 1024px) and (orientation: portrait) {
  html[lang="km"] { --p1: 10.6vw; --p2: 5vw; --p4: 13px; --p5: 2.6vw; }
  html[lang="km"] h1.tit { font-size: 10.6vw !important; line-height: 1.3; top: 13vw; }
  html[lang="km"] #segundo { top: 43vw; height: 9vw; }
  html[lang="km"] #landing h3 { transform: translateY(0); }
  html[lang="km"] #largemov { line-height: 1.6; }
  html[lang="km"] .experiment { font-size: 4.8vw; }
  html[lang="km"] #motion h2 { font-size: 9vw; }
  html[lang="km"] #ticket, html[lang="km"] #ticket.start, html[lang="km"] #ticket.prod1, html[lang="km"] #ticket.prod2,
  html[lang="km"] #ticket.prod3, html[lang="km"] #ticket.prod4, html[lang="km"] #ticket.final { transform: translateY(110%); }
  html[lang="km"] #ticket { font-size: 3.1vw; line-height: 4.7vw; }
  html[lang="km"] #ticket.up { transform: translateY(0); }
  html[lang="km"] .click { line-height: 1.5; height: auto; font-size: 3vw; }
  html[lang="km"] .purchased { min-width: 22.5vw; }
  html[lang="km"] #infosmov, html[lang="km"] #worksmov { line-height: 3.9vw; font-size: 12px; padding-left: 3vw; padding-right: 3vw; }
  html[lang="km"] #clients .nv-work-title { font-size: 9.4vw; }
  html[lang="km"] .nv-work-sub { width: 88vw; }
  html[lang="km"] #final h2 { font-size: 9vw; }
  html[lang="km"] .nv-wa { font-size: 5.4vw; }
  html[lang="km"] #specialprojects { font-size: 4.2vw; line-height: 2.3; }
  html[lang="km"] #inferior, html[lang="km"] #primernum, html[lang="km"] .interactive, html[lang="km"] .websites, html[lang="km"] .communication { line-height: 1.5; }
}