:root {
  --tinta: #15132b;
  --fondo1: #1d1a45;
  --fondo2: #3a1f6b;
  --blanco: #fffdf6;
  --amarillo: #ffd23f;
  --naranja: #ff7b3a;
  --rosa: #ff4d8d;
  --verde: #2ee88a;
  --azul: #3ad1ff;
  --morado: #c77dff;
  --rojo: #ff4d5e;
  /* Unidad base: 1% del lado más corto de la pantalla (alto en laptops, ancho en
     celulares verticales), con un mínimo para que nada quede ilegible. */
  --u: max(1vmin, 4.4px);
  --display: 'Lilita One', 'Arial Black', 'Segoe UI Black', sans-serif;
  --texto: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo1);
  color: var(--blanco);
  font-family: var(--texto);
  user-select: none;
}

#app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 77, 141, 0.25), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(58, 209, 255, 0.2), transparent 45%),
    linear-gradient(160deg, var(--fondo1), var(--fondo2));
}

button { font-family: inherit; cursor: pointer; }
.oculto { display: none !important; }

/* ---------- barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  padding: calc(1.2 * var(--u)) calc(2.2 * var(--u));
}
.logo {
  font-family: var(--display);
  font-size: calc(3.4 * var(--u));
  letter-spacing: 0.04em;
  text-shadow: 0 calc(0.4 * var(--u)) 0 var(--tinta);
}
.logo span { font-size: 0.9em; }
.barra-der { display: flex; align-items: center; gap: calc(1 * var(--u)); }
.mini {
  font-size: calc(2.4 * var(--u));
  background: rgba(255, 255, 255, 0.1);
  border: calc(0.3 * var(--u)) solid rgba(255, 255, 255, 0.25);
  color: var(--blanco);
  border-radius: calc(1 * var(--u));
  padding: calc(0.4 * var(--u)) calc(1 * var(--u));
}
.red {
  width: calc(1.6 * var(--u));
  height: calc(1.6 * var(--u));
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 calc(1 * var(--u)) var(--rojo);
}
.red.ok { background: var(--verde); box-shadow: 0 0 calc(1 * var(--u)) var(--verde); }

.marcador {
  display: flex;
  align-items: center;
  gap: calc(2.5 * var(--u));
  font-family: var(--display);
  font-size: calc(3.6 * var(--u));
}
.marcador .pill {
  background: rgba(0, 0, 0, 0.35);
  border: calc(0.35 * var(--u)) solid rgba(255, 255, 255, 0.2);
  border-radius: calc(99 * var(--u));
  padding: calc(0.3 * var(--u)) calc(2 * var(--u));
  white-space: nowrap;
}
.marcador .vidas { letter-spacing: 0.2em; }
.marcador .perdida { filter: grayscale(1); opacity: 0.35; }

/* ---------- arena ---------- */
.arena {
  position: relative;
  display: grid;
  grid-template-columns: 1fr calc(9 * var(--u)) 1fr;
  gap: calc(1.5 * var(--u));
  padding: 0 calc(2.2 * var(--u)) calc(2.2 * var(--u));
  min-height: 0;
}
.panel {
  position: relative;
  border-radius: calc(3 * var(--u));
  overflow: hidden;
  border: calc(0.6 * var(--u)) solid var(--tinta);
  box-shadow: 0 calc(1 * var(--u)) 0 var(--tinta), 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.15) inset;
  min-height: 0;
}
.panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.panel-camara { background: #0d0b1f; }
.panel-robot {
  background:
    radial-gradient(circle at 50% 75%, rgba(255, 210, 63, 0.25), transparent 55%),
    linear-gradient(180deg, #2b2a6b, #191744);
}

.etiqueta {
  position: absolute;
  top: calc(1.6 * var(--u));
  left: calc(1.6 * var(--u));
  font-family: var(--display);
  font-size: calc(3 * var(--u));
  background: var(--tinta);
  padding: calc(0.4 * var(--u)) calc(1.6 * var(--u));
  border-radius: calc(1.2 * var(--u));
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.etiqueta-der { left: auto; right: calc(1.6 * var(--u)); }

.gesto-vivo {
  position: absolute;
  left: calc(1.6 * var(--u));
  bottom: calc(1.6 * var(--u));
  font-family: var(--display);
  font-size: calc(3 * var(--u));
  padding: calc(0.6 * var(--u)) calc(1.8 * var(--u));
  border-radius: calc(1.4 * var(--u));
  background: rgba(21, 19, 43, 0.8);
  border: calc(0.35 * var(--u)) solid rgba(255, 255, 255, 0.3);
}
.gesto-vivo:empty { display: none; }
.gesto-vivo-der { left: auto; right: calc(1.6 * var(--u)); }

.centro {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vs {
  font-family: var(--display);
  font-size: calc(6 * var(--u));
  color: var(--amarillo);
  text-shadow: 0 calc(0.6 * var(--u)) 0 var(--tinta);
  transform: rotate(-8deg);
}

/* J1 vs J2 en la misma laptop: solo la cámara, a todo lo ancho */
#app.modo-local .arena { grid-template-columns: 1fr; }
#app.modo-local .centro,
#app.modo-local .panel-robot { display: none; }
#app.modo-local .etiqueta { font-size: calc(4 * var(--u)); }
#app.modo-local .gesto-vivo { font-size: calc(3.6 * var(--u)); }

/* Duelo entre laptops: mi cámara | VS | cámara del rival (sin Robi) */
.panel-rival { display: none; background: #0d0b1f; }
#app.modo-duelo .panel-robot { display: none; }
#app.modo-duelo .panel-rival { display: block; }
.panel-rival video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sin espejo: al rival lo vemos como en una videollamada (y los textos no salen al revés) */
}
/* Durante la cuenta se tapa al rival: así nadie ve su mano y cambia la jugada a último momento.
   El video sigue prendido debajo; solo se pone un div opaco encima (sin filtros, que en
   laptops modestas congelan el video y lo hacen tardar en volver). */
.cortina {
  position: absolute;
  inset: 0;
  display: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(199, 125, 255, 0.25), transparent 60%),
    linear-gradient(160deg, #1d1a45, #2b1a52);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.2 * var(--u));
  padding: calc(4 * var(--u));
  text-align: center;
  font-family: var(--display);
  font-size: calc(4.5 * var(--u));
  z-index: 1;
}
.cortina .ic { font-size: calc(14 * var(--u)); line-height: 1; }
.cortina .tenue { font-family: var(--texto); font-weight: 800; font-size: calc(2.2 * var(--u)); opacity: 0.75; max-width: 30em; }
.panel-rival.cubierto .cortina { display: flex; }
.panel-rival.cubierto .rival-info { display: none; }

.sel-camara {
  max-width: calc(26 * var(--u));
  font-family: var(--texto);
  font-weight: 800;
  font-size: calc(1.8 * var(--u));
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.1);
  border: calc(0.3 * var(--u)) solid rgba(255, 255, 255, 0.25);
  border-radius: calc(1 * var(--u));
  padding: calc(0.6 * var(--u)) calc(0.8 * var(--u));
}
.sel-camara option { color: var(--tinta); }
.rival-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.5 * var(--u));
  padding: calc(4 * var(--u));
  text-align: center;
  font-size: calc(2.6 * var(--u));
  font-weight: 900;
}
.rival-info:empty { display: none; }
.rival-info .ic { font-size: calc(14 * var(--u)); line-height: 1; }
.rival-info .nombre { font-family: var(--display); font-weight: normal; font-size: calc(5 * var(--u)); }
.rival-info .tenue { opacity: 0.7; }

/* gesto en grande sobre cada cámara al revelar */
.gesto-grande {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(30 * var(--u));
  pointer-events: none;
  background: rgba(13, 11, 31, 0.35);
  filter: drop-shadow(0 calc(1.2 * var(--u)) 0 rgba(0, 0, 0, 0.5));
  z-index: 2;
}
.gesto-grande:empty { display: none; }
.gesto-grande.pop { animation: pop-gesto 0.4s cubic-bezier(.2, 1.6, .4, 1); }
.gesto-grande.gana { box-shadow: inset 0 0 0 calc(1.2 * var(--u)) var(--verde); }
.gesto-grande.pierde { box-shadow: inset 0 0 0 calc(1.2 * var(--u)) var(--rojo); }
@keyframes pop-gesto { from { transform: scale(0.3); opacity: 0; } }

/* ---------- anuncio grande (cuenta / resultado) ---------- */
.anuncio {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  font-family: var(--display);
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: var(--blanco);
  -webkit-text-stroke: calc(0.9 * var(--u)) var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0 calc(1.2 * var(--u)) 0 var(--tinta);
  white-space: nowrap;
  z-index: 5;
}
.anuncio .sub {
  display: block;
  font-size: 0.38em;
  margin-top: calc(1.5 * var(--u));
  -webkit-text-stroke-width: calc(0.6 * var(--u));
}
.anuncio.pop { animation: pop 0.35s cubic-bezier(.2, 1.6, .4, 1); }
.anuncio.gana { color: var(--verde); }
.anuncio.pierde { color: var(--rojo); }
.anuncio.empate { color: var(--amarillo); }
@keyframes pop {
  from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ---------- capas de menú ---------- */
.capa {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(3 * var(--u));
  z-index: 10;
  background: rgba(13, 11, 31, 0.55);
  backdrop-filter: blur(3px);
}
.capa:empty { display: none; }

.tarjeta {
  background: var(--blanco);
  color: var(--tinta);
  border: calc(0.7 * var(--u)) solid var(--tinta);
  border-radius: calc(3.5 * var(--u));
  box-shadow: 0 calc(1.4 * var(--u)) 0 var(--tinta);
  padding: calc(3.5 * var(--u)) calc(4.5 * var(--u));
  max-width: min(92vw, calc(150 * var(--u)));
  max-height: 92dvh;
  overflow: auto;
  text-align: center;
  animation: entra 0.3s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes entra { from { transform: translateY(calc(4 * var(--u))) scale(0.94); opacity: 0; } }

.tarjeta h1, .tarjeta h2 {
  font-family: var(--display);
  font-weight: normal;
  margin: 0 0 calc(1.5 * var(--u));
  line-height: 1.05;
}
.tarjeta h1 { font-size: calc(7.5 * var(--u)); }
.tarjeta h2 { font-size: calc(4.6 * var(--u)); }
.tarjeta p { font-size: calc(2.4 * var(--u)); margin: calc(0.8 * var(--u)) 0; font-weight: 800; }
.tarjeta .tenue { opacity: 0.65; }

.titulo-grande {
  font-size: calc(9 * var(--u)) !important;
  color: var(--rosa);
  -webkit-text-stroke: calc(0.5 * var(--u)) var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0 calc(0.8 * var(--u)) 0 var(--tinta);
}

.botones { display: flex; gap: calc(2 * var(--u)); justify-content: center; flex-wrap: wrap; margin-top: calc(2.5 * var(--u)); }
.btn {
  font-family: var(--display);
  font-size: calc(3.2 * var(--u));
  color: var(--tinta);
  background: var(--amarillo);
  border: calc(0.6 * var(--u)) solid var(--tinta);
  border-radius: calc(2 * var(--u));
  box-shadow: 0 calc(0.9 * var(--u)) 0 var(--tinta);
  padding: calc(1.4 * var(--u)) calc(3 * var(--u));
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translateY(-calc(0.3 * var(--u))); }
.btn:active { transform: translateY(calc(0.7 * var(--u))); box-shadow: 0 calc(0.2 * var(--u)) 0 var(--tinta); }
.btn:disabled { filter: grayscale(1); opacity: 0.5; cursor: default; transform: none; }
.btn.verde { background: var(--verde); }
.btn.azul { background: var(--azul); }
.btn.rosa { background: var(--rosa); color: var(--blanco); }
.btn.gris { background: #d9d6e8; }
.btn.chico { font-size: calc(2.4 * var(--u)); padding: calc(0.9 * var(--u)) calc(2 * var(--u)); }
.btn .detalle { display: block; font-family: var(--texto); font-size: 0.55em; font-weight: 800; opacity: 0.75; }

.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--u)); margin-top: calc(2 * var(--u)); }
.modos .btn { padding: calc(2 * var(--u)) calc(2 * var(--u)); }
.modos .icono { display: block; font-size: calc(6 * var(--u)); line-height: 1.2; }

.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); margin-top: calc(3 * var(--u)); text-align: left; }
.caja {
  background: #efeaf9;
  border: calc(0.45 * var(--u)) solid var(--tinta);
  border-radius: calc(2 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2 * var(--u));
}
.caja h3 { font-family: var(--display); font-weight: normal; font-size: calc(2.8 * var(--u)); margin: 0 0 calc(1 * var(--u)); }
.lista { list-style: none; padding: 0; margin: 0; font-size: calc(2.2 * var(--u)); font-weight: 800; }
.lista li { display: flex; gap: calc(1 * var(--u)); align-items: center; padding: calc(0.4 * var(--u)) 0; }
.lista .pos { width: calc(3.6 * var(--u)); font-family: var(--display); font-weight: normal; }
.lista .nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .pts { font-family: var(--display); font-weight: normal; }
.lista li.yo { background: var(--amarillo); border-radius: calc(1 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.8 * var(--u)); }
.vacio { opacity: 0.6; font-size: calc(2 * var(--u)); font-weight: 800; }

/* perfil */
.campo {
  font-family: var(--display);
  font-size: calc(4 * var(--u));
  width: min(calc(70 * var(--u)), 80vw);
  padding: calc(1.2 * var(--u)) calc(2 * var(--u));
  border: calc(0.6 * var(--u)) solid var(--tinta);
  border-radius: calc(2 * var(--u));
  text-align: center;
  color: var(--tinta);
  outline: none;
}
.campo:focus { box-shadow: 0 0 0 calc(0.6 * var(--u)) var(--azul); }
.fila-nombre { display: flex; gap: calc(1.5 * var(--u)); justify-content: center; align-items: center; }
.formaciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(1.2 * var(--u));
  margin-top: calc(2 * var(--u));
}
.formacion {
  font-family: var(--texto);
  font-weight: 900;
  font-size: calc(1.9 * var(--u));
  color: var(--tinta);
  background: #f2eefb;
  border: calc(0.45 * var(--u)) solid var(--tinta);
  border-radius: calc(1.6 * var(--u));
  padding: calc(1 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u));
  text-align: left;
  min-height: calc(7 * var(--u));
}
.formacion .ic { font-size: calc(3.4 * var(--u)); }
.formacion.sel { background: var(--verde); box-shadow: 0 calc(0.6 * var(--u)) 0 var(--tinta); transform: translateY(-calc(0.4 * var(--u))); }

/* lobby */
.salas { display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); margin: calc(2 * var(--u)) 0; min-width: min(80vw, calc(90 * var(--u))); }
.sala-item {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  background: #f2eefb;
  border: calc(0.45 * var(--u)) solid var(--tinta);
  border-radius: calc(2 * var(--u));
  padding: calc(1.2 * var(--u)) calc(2 * var(--u));
  text-align: left;
  font-size: calc(2.4 * var(--u));
  font-weight: 900;
}
.sala-item .codigo { font-family: var(--display); font-weight: normal; font-size: calc(3.4 * var(--u)); }
.sala-item .quien { flex: 1; }
.codigo-gigante {
  font-family: var(--display);
  font-size: calc(14 * var(--u));
  letter-spacing: 0.15em;
  color: var(--naranja);
  -webkit-text-stroke: calc(0.6 * var(--u)) var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0 calc(1 * var(--u)) 0 var(--tinta);
  margin: calc(1 * var(--u)) 0;
}
.fila-codigo { display: flex; gap: calc(1.5 * var(--u)); justify-content: center; align-items: center; margin-top: calc(1 * var(--u)); }
.fila-codigo .campo { width: calc(22 * var(--u)); text-transform: uppercase; letter-spacing: 0.2em; }

/* resultados */
.puntaje-gigante {
  font-family: var(--display);
  font-size: calc(18 * var(--u));
  line-height: 1;
  color: var(--naranja);
  -webkit-text-stroke: calc(0.7 * var(--u)) var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0 calc(1.2 * var(--u)) 0 var(--tinta);
}
.insignias { display: flex; gap: calc(1.5 * var(--u)); justify-content: center; flex-wrap: wrap; margin: calc(2 * var(--u)) 0; }
.insignia {
  background: var(--amarillo);
  border: calc(0.45 * var(--u)) solid var(--tinta);
  border-radius: calc(99 * var(--u));
  padding: calc(0.8 * var(--u)) calc(2.2 * var(--u));
  font-size: calc(2.4 * var(--u));
  font-weight: 900;
}
.insignia.azul { background: var(--azul); }
.insignia.verde { background: var(--verde); }

.error { color: var(--rojo); font-weight: 900; font-size: calc(2.2 * var(--u)); min-height: calc(3 * var(--u)); }
.carga-barra { width: calc(60 * var(--u)); height: calc(2 * var(--u)); border-radius: calc(99 * var(--u)); border: calc(0.4 * var(--u)) solid var(--tinta); overflow: hidden; margin: calc(2 * var(--u)) auto 0; }
.carga-barra div { height: 100%; width: 40%; background: var(--rosa); animation: carga 1.1s ease-in-out infinite alternate; }
@keyframes carga { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.carga-barra.real div { animation: none; transform: none; width: 0; transition: width 0.2s; }

.pista-esc {
  position: fixed;
  bottom: calc(1 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(1.8 * var(--u));
  font-weight: 800;
  opacity: 0.6;
  z-index: 6;
}

/* ===================== Responsive ===================== */

button, .formacion, .btn { touch-action: manipulation; } /* sin zoom por doble toque */
.capa { padding: max(calc(3 * var(--u)), env(safe-area-inset-top)) max(calc(3 * var(--u)), env(safe-area-inset-right))
  max(calc(3 * var(--u)), env(safe-area-inset-bottom)) max(calc(3 * var(--u)), env(safe-area-inset-left)); }

/* el anuncio nunca se sale por los lados */
.anuncio { font-size: min(calc(13 * var(--u)), 10vw); max-width: 96vw; }

/* Tablets y pantallas casi cuadradas: menús en una columna */
@media (max-aspect-ratio: 4/3) {
  .formaciones { grid-template-columns: repeat(2, 1fr); }
  .modos, .columnas { grid-template-columns: 1fr; }
  .modos .btn { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(2 * var(--u)); text-align: left; }
  .modos .icono { grid-row: span 2; font-size: calc(5 * var(--u)); white-space: nowrap; text-align: center; min-width: 4.2em; }
}

/* Pantallas verticales (celulares, tablets de pie): las cámaras se apilan */
@media (orientation: portrait) {
  .arena {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    padding: 0 calc(2 * var(--u)) max(calc(2 * var(--u)), env(safe-area-inset-bottom));
  }
  .vs { font-size: calc(5 * var(--u)); transform: none; line-height: 1; }
  /* J1 vs J2: la cámara ocupa todo el alto disponible */
  #app.modo-local .arena { grid-template-rows: 1fr; }
  .anuncio { top: 50%; white-space: normal; width: 94vw; font-size: min(calc(13 * var(--u)), 12vw); }
  .gesto-grande { font-size: min(calc(30 * var(--u)), 28vw); }
  .tarjeta { padding: calc(3 * var(--u)) calc(3 * var(--u)); border-radius: calc(3 * var(--u)); }
  .tarjeta h1 { font-size: calc(9 * var(--u)); }
  .titulo-grande { font-size: calc(11 * var(--u)) !important; }
  .tarjeta p { font-size: calc(3.4 * var(--u)); }
  .btn { font-size: calc(4.4 * var(--u)); }
  .btn .detalle { font-size: 0.6em; }
  .lista, .caja h3 { font-size: calc(3.6 * var(--u)); }
  .formacion { font-size: calc(3 * var(--u)); min-height: calc(10 * var(--u)); }
  .formacion .ic { font-size: calc(5 * var(--u)); }
  .campo { font-size: calc(5.5 * var(--u)); width: 100%; }
  .fila-nombre { flex-wrap: nowrap; }
  .sala-item { flex-wrap: wrap; font-size: calc(3.4 * var(--u)); }
  .codigo-gigante { font-size: calc(18 * var(--u)); }
  .puntaje-gigante { font-size: calc(24 * var(--u)); }
  .insignia { font-size: calc(3.4 * var(--u)); }
  .carga-barra { width: 80%; }
  .etiqueta, .gesto-vivo { font-size: calc(3.6 * var(--u)); }
  .rival-info { font-size: calc(3.6 * var(--u)); }
}

/* Barra superior en pantallas angostas: solo los íconos del logo */
@media (max-width: 720px) {
  .barra { padding: max(calc(1.2 * var(--u)), env(safe-area-inset-top)) calc(2 * var(--u)) calc(1.2 * var(--u)); gap: calc(1 * var(--u)); }
  .logo { font-size: calc(4.5 * var(--u)); white-space: nowrap; overflow: hidden; max-width: 3.4em; }
  .marcador { font-size: calc(4 * var(--u)); gap: calc(1 * var(--u)); flex-wrap: wrap; justify-content: center; }
  .marcador .pill { padding: 0.2em 0.7em; }
  .mini { font-size: calc(4 * var(--u)); }
}

/* Celulares acostados (poca altura): todo un poco más compacto */
@media (orientation: landscape) and (max-height: 500px) {
  .barra { padding-top: calc(0.6 * var(--u)); padding-bottom: calc(0.6 * var(--u)); }
  .tarjeta { padding: calc(2.5 * var(--u)) calc(3 * var(--u)); }
  .columnas { margin-top: calc(1.5 * var(--u)); }
}