/* ===========================================================================
   Estilos de los dos juegos de la home.
   Copian el lenguaje visual que ya tiene la pagina (tarjeta blanca, borde de
   1px, radio 20, sombra baja) para que no parezcan un anadido de fuera.
   No redefinen ni una sola regla del diseno existente.
   =========================================================================== */

.jug {
  position: relative;
  background: #fff;
  border: 1px solid rgba(91, 61, 245, 0.28);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(12, 14, 20, 0.5);
  min-width: 0;
}

.jug__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(12, 14, 20, 0.08);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9aa0b0;
}
.jug__datos { display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.jug__datos b { color: #0c0e14; font-weight: 700; }

/* Altura fija: sin esto el lienzo hereda la proporcion del atributo y crece
   de forma imprevisible segun el ancho de la columna. */
.jug canvas { display: block; width: 100%; touch-action: none; background: #fff; }
.jug--hero canvas      { height: 250px; }
.jug--servicios canvas { height: 220px; }
@media (max-width: 660px) {
  .jug--hero canvas      { height: 220px; }
  .jug--servicios canvas { height: 200px; }
}

/* El velo tapa el juego hasta que alguien lo activa a proposito */
.jug__velo {
  position: absolute;
  inset: 41px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(2px);
  z-index: 2;
}
.jug.jug-activo .jug__velo { display: none; }

.jug__velo p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5a6070;
  max-width: 34ch;
}

.jug__btn {
  font: inherit;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  background: #5b3df5;
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 14px 30px -14px rgba(91, 61, 245, 0.6);
  transition: transform 0.15s ease, filter 0.2s ease;
}
.jug__btn:hover { filter: brightness(1.06); }
.jug__btn:active { transform: translateY(1px); }
.jug__btn:focus-visible { outline: 2px solid #0c0e14; outline-offset: 3px; }

/* Mando en pantalla: solo aparece donde no hay teclado */
.jug__mando { display: none; }
@media (hover: none) {
  .jug__mando {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(2, 52px);
    gap: 6px;
    justify-content: center;
    padding: 12px 0 14px;
  }
  .jug__mando button {
    font: inherit; font-size: 19px;
    border: 1px solid rgba(12, 14, 20, 0.14);
    background: #f7f8fc; color: #0c0e14;
    border-radius: 12px; cursor: pointer;
  }
  .jug__mando button:active { background: #5b3df5; color: #fff; }
  .jug__m-arr { grid-column: 2; }
  .jug__m-izq { grid-column: 1; grid-row: 2; }
  .jug__m-aba { grid-column: 2; grid-row: 2; }
  .jug__m-der { grid-column: 3; grid-row: 2; }
}

/* Colocacion: en el encabezado ocupa el ancho de las dos tarjetas de anos */
.jug--hero { grid-column: 1 / -1; }

/* En "Que hago" rellena el hueco que dejan las siete tarjetas */
@media (min-width: 660px) { .jug--servicios { grid-column: span 2; } }