/* ============================================================================
   OneMartech — página temporal
   Usa los tokens del sistema (tokens.css). Base oscura, sin border-radius.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6;
  color: var(--color-text-inverse); background: var(--color-surface-inverse);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2 { font-family: var(--font-display); margin: 0; }
:focus-visible { outline: 2px solid var(--color-accent-inverse); outline-offset: 3px; }

.mono {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Fondo --- */
.bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg > span { position: absolute; inset: 0; display: block; }
.bg-glow {
  inset: -30%;
  background:
    radial-gradient(42% 50% at 20% 22%, rgb(77 124 255 / .30), transparent 68%),
    radial-gradient(34% 44% at 80% 84%, rgb(226 112 28 / .18), transparent 70%);
  animation: glow 30s ease-in-out infinite alternate;
}
@keyframes glow {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.18); }
}
.bg-grid {
  background-image:
    linear-gradient(to right,  rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 88%);
          mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 88%);
  animation: grid 70s linear infinite;
}
@keyframes grid { to { background-position: 76px 76px; } }

/* --- Estructura --- */
.pantalla {
  position: relative; z-index: 1;
  width: min(100% - 2.5rem, 980px); margin-inline: auto;
  padding-block: clamp(40px, 7vw, 72px) var(--space-8);
  display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px);
}

.cabecera { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
.logo { width: clamp(180px, 26vw, 248px); height: auto; }
.estado { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text-inverse-secondary); margin: 0; }
.punto { width: 7px; height: 7px; background: var(--color-emphasis-inverse); }
.js .punto { animation: latido 2.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.intro h1 {
  font-weight: 700; font-size: clamp(30px, 5.5vw, 50px);
  letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance;
  margin-bottom: var(--space-4); max-width: 16ch;
}
.intro p { color: var(--color-text-inverse-secondary); max-width: 52ch; margin: 0 0 var(--space-4); }
.contacto { margin: 0; }
.contacto a {
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--color-accent-inverse); text-decoration: none;
  border-bottom: 1px solid rgb(77 124 255 / .4); padding-bottom: 2px;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.contacto a:hover { color: var(--color-text-inverse); border-color: var(--color-text-inverse); }

/* ============================================================================
   JUEGO
   ========================================================================= */
.juego { border: 0; background: none; }
.juego-cabecera {
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start;
  justify-content: space-between; padding: 0 0 var(--space-5);
}
.juego h2 { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; }
.juego-ayuda { margin: 0; font-size: var(--text-base); color: var(--color-text-inverse-secondary); max-width: 44ch; }

.marcador { display: flex; gap: var(--space-5); margin: 0; }
.marcador dt { color: var(--color-text-inverse-secondary); margin-bottom: 4px; }
.marcador dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px;
  line-height: 1; letter-spacing: -0.02em;
}

/* --- Tablero (canvas) --- */
.tablero { position: relative; line-height: 0; margin-inline: calc(var(--space-4) * -1); }
#lienzo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 760 / 420; touch-action: none;
}
/* El anillo de foco se muestra al llegar con teclado, pero NO durante la
   partida: el juego hace cv.focus() al arrancar y el marco quedaba pintado
   toda la partida. Jugando, que el canvas está activo es evidente. */
#lienzo:focus-visible { outline: 2px solid var(--color-accent-inverse); outline-offset: -2px; }
.en-juego #lienzo:focus-visible, .en-juego #lienzo:focus { outline: none; }

/* --- Capa de inicio / pausa / fin --- */
.capa {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); text-align: center; padding: var(--space-6) var(--space-5);
  background: radial-gradient(58% 58% at 50% 50%,
    rgb(10 12 16 / .93), rgb(10 12 16 / .72) 58%, rgb(10 12 16 / .18) 100%);
}
.capa[hidden] { display: none; }
.capa-titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3.4vw, 28px); line-height: 1.15; letter-spacing: -0.02em;
  margin: 0; max-width: 18ch; text-wrap: balance;
  text-shadow: 0 2px 18px rgb(10 12 16 / .9);
}
.capa-texto {
  margin: 0; color: var(--color-text-inverse-secondary);
  font-size: var(--text-base); line-height: 1.5; max-width: 40ch;
  text-shadow: 0 1px 12px rgb(10 12 16 / .9);
}

kbd {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--color-border-inverse); padding: 2px 6px;
  color: var(--color-text-inverse);
}

.btn {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  border: 0; border-radius: 0; cursor: pointer; padding: 13px 24px;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.btn--primary { background: var(--color-accent-inverse); color: var(--color-surface-inverse); }
.btn--primary:hover { background: var(--color-text-inverse); }

.juego-pie {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  align-items: center; justify-content: space-between;
  margin: 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border-inverse);
}
.aviso {
  margin: 0; font-size: var(--text-base); color: var(--color-text-inverse-secondary);
  min-height: 1.5em; flex: 1 1 auto;
}
.aviso b { color: var(--color-text-inverse); font-weight: 600; }
.teclas { margin: 0; color: var(--color-text-inverse-secondary); line-height: 2.1; flex: 0 0 auto; }
@media (max-width: 700px) { .teclas { display: none; } }

/* --- Controles táctiles --- */
.tactil { display: none; gap: 1px; background: var(--color-border-inverse); margin-top: var(--space-4); }
.tactil button {
  flex: 1; background: var(--color-surface-inverse); color: var(--color-text-inverse);
  border: 0; padding: 16px; font-size: 19px; cursor: pointer;
}
.tactil button:active { background: var(--color-accent-inverse); color: var(--color-surface-inverse); }
@media (hover: none) and (pointer: coarse) { .tactil { display: flex; } }



/* ============================================================================
   LA RED / PIE
   ========================================================================= */
.red-label { color: var(--color-text-inverse-secondary); margin: 0 0 var(--space-5); }
.firmas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 700px) { .firmas { grid-template-columns: repeat(3, 1fr); } }
.firmas li { border: 1px solid var(--color-border-inverse); }
/* La tarjeta entera es el enlace: más área de clic y no hay que apuntarle a
   una línea de texto chica. */
.firma {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; text-decoration: none; color: inherit;
  transition: background-color 220ms ease-out;
}
.firmas li { transition: border-color 220ms ease-out; }
.firmas li:hover { border-color: var(--color-text-inverse-secondary); }
.firma:hover { background: rgb(255 255 255 / .04); color: inherit; }
.firma:focus-visible { outline: 2px solid var(--color-accent-inverse); outline-offset: -2px; }

/* Logo de la agencia. Alturas distintas por marca: los tres tienen pesos
   ópticos muy diferentes y hay que igualarlos a ojo. */
.firma-logo {
  height: 92px; width: 100%; display: grid; place-items: center;
  border-bottom: 1px solid var(--color-border-inverse);
}
.firma-logo img { width: auto; opacity: .85; transition: opacity 220ms ease-out; }
.firma:hover .firma-logo img { opacity: 1; }
.firma-logo img[alt='HAK']           { max-height: 26px; }
.firma-logo img[alt='Mila Santiago'] { max-height: 27px; }
.firma-logo img[alt='Quan']          { max-height: 30px; }

.firma-rol { color: var(--color-text-inverse-secondary); padding: var(--space-4) var(--space-4) 0; text-align: center; }

/* Firma de endoso: el sello que dice que la agencia es parte de la red. */
.firma-endoso {
  width: clamp(128px, 16vw, 158px); height: auto;
  margin: var(--space-3) 0 var(--space-5); opacity: .85;
  transition: opacity 220ms ease-out;
}
.firma:hover .firma-endoso { opacity: 1; }

/* Pie de la tarjeta: el dominio al que lleva. */
.firma-ir {
  margin-top: auto; width: 100%; text-align: center;
  padding: var(--space-4); border-top: 1px solid var(--color-border-inverse);
  color: var(--color-text-inverse-secondary);
  transition: color 200ms ease-out, background-color 200ms ease-out;
}
.firma-ir span { display: inline-block; transition: transform 220ms cubic-bezier(.2,.7,.3,1); }
.firma:hover .firma-ir { color: var(--color-accent-inverse); background: rgb(77 124 255 / .07); }
.firma:hover .firma-ir span { transform: translateX(4px); }

.pie { border-top: 1px solid var(--color-border-inverse); padding-top: var(--space-5); }
.pie p { margin: 0; color: var(--color-text-inverse-secondary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}