/* Numik Labs — estilo común de la web (español e inglés). Sin dependencias: fuente auto-hospedada. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('fonts/plus-jakarta-sans.woff2') format('woff2');}

/* Colores de la marca: marino #0a243c y cian #00d4f3 */
:root{
  color-scheme:dark;
  --bg:#071a2b; --panel:#0d2740; --panel-alt:#0a2136; --line:#1c3b58;
  --ink:#eef4fb; --ink-dim:#93a9bf;
  --cian:#00d4f3; --cian-2:#0aa8c9; --cian-ink:#04202f; --glow:rgba(0,212,243,.32);
  --halo:rgba(0,212,243,.16); --foco:#5fe6fa;
  --trazen-a:#60a5fa; --trazen-b:#2563eb; --trazen-glow:rgba(59,130,246,.45);
  --radius:28px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef3f8; --panel:#ffffff; --panel-alt:#f3f7fb; --line:#d3dee9;
  --ink:#0a243c; --ink-dim:#4a6178;
  --cian:#0091ad; --cian-2:#007891; --cian-ink:#ffffff; --glow:rgba(0,145,173,.28);
  --halo:rgba(0,180,214,.14); --foco:#0091ad;
  --trazen-glow:rgba(59,130,246,.35);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(900px 560px at 75% -10%, var(--halo), transparent 70%),
             radial-gradient(700px 420px at 0% 110%, var(--halo), transparent 70%);
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 16px; }
@media (min-width:600px){ .wrap{ padding:0 24px; } }

/* Logo según el tema */
.tema-claro, [data-theme="light"] .tema-oscuro{ display:none; }
[data-theme="light"] .tema-claro{ display:block; }

/* Cabecera */
header.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:20px; letter-spacing:-.01em; }
.marca img{ height:30px; width:auto; }
.acciones-top{ display:flex; align-items:center; gap:10px; }
.btn-tema, .btn-idioma{ background:var(--panel); border:1px solid var(--line); transition:border-color .2s, transform .2s; }
.btn-tema{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer; color:var(--cian); }
.btn-tema .luna, [data-theme="light"] .btn-tema .sol{ display:none; }
[data-theme="light"] .btn-tema .luna{ display:block; }
.btn-idioma{
  height:44px; padding:0 15px 0 13px; border-radius:999px; display:inline-flex; align-items:center; gap:7px;
  color:var(--ink); font-weight:700; font-size:14px; letter-spacing:.04em; text-decoration:none;
}
.btn-tema:hover, .btn-idioma:hover{ border-color:var(--cian); transform:translateY(-1px); }
.btn-tema svg, .btn-idioma svg, .btn svg, .valor svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-tema svg{ width:21px; height:21px; }
.btn-idioma svg{ width:18px; height:18px; color:var(--cian); }

/* Botones */
.botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:700; font-size:16px;
  padding:14px 24px; border-radius:999px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible, .btn-tema:focus-visible, .btn-idioma:focus-visible, .marca:focus-visible, footer a:focus-visible{
  outline:3px solid var(--foco); outline-offset:3px;
}
.btn-primario{ background:linear-gradient(180deg,var(--cian),var(--cian-2)); color:var(--cian-ink); box-shadow:0 14px 34px -12px var(--glow); }
.btn-secundario{ background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.btn-secundario:hover{ border-color:var(--cian); }
.btn-trazen{ background:linear-gradient(180deg,var(--trazen-a),var(--trazen-b)); color:#fff; box-shadow:0 14px 34px -12px var(--trazen-glow); }
/* Web de Trazen: compañero del de Google Play, teñido del azul de Trazen, con globo y flecha que avanza */
.btn-trazen-web{
  background:color-mix(in srgb, var(--trazen-a) 13%, var(--panel)); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--trazen-a) 50%, transparent); box-shadow:0 12px 30px -18px var(--trazen-glow);
}
.btn-trazen-web svg{ color:var(--trazen-a); }
[data-theme="light"] .btn-trazen-web svg{ color:var(--trazen-b); }
.btn-trazen-web .flecha{ width:18px; height:18px; margin-left:-2px; transition:transform .2s; }
.btn-trazen-web:hover{ border-color:var(--trazen-a); box-shadow:0 14px 34px -12px var(--trazen-glow); }
.btn-trazen-web:hover .flecha{ transform:translateX(3px); }

/* Hero */
.hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; padding:40px 0 30px; }
.etiqueta{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cian);
  background:color-mix(in srgb, var(--cian) 12%, transparent); border:1px solid color-mix(in srgb, var(--cian) 30%, transparent);
  padding:7px 14px; border-radius:999px;
}
h1{ font-size:clamp(34px,5.2vw,58px); text-wrap:balance; line-height:1.05; letter-spacing:-.02em; margin:18px 0 0; font-weight:700; }
h1 em{ display:block; font-style:normal; color:var(--cian); }
@media (min-width:600px){ h1 .linea{ white-space:nowrap; } }
.sub{ font-size:clamp(17px,2.2vw,19px); color:var(--ink-dim); max-width:520px; margin:20px 0 0; }
/* El trazado de Numik: retícula, caminos descartados y una línea que va de la idea a lo real */
.escena{ position:relative; margin:0; }
.trazado{ width:100%; height:auto; display:block; overflow:visible; }
.reticula line{ stroke:var(--line); stroke-width:1; }
.descarte{ fill:none; stroke:var(--ink-dim); stroke-width:1.2; stroke-dasharray:3 5; opacity:.6; }
.camino{ fill:none; stroke:var(--cian); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.nodo circle{ fill:var(--bg); stroke:var(--ink); stroke-width:1.5; }
.nodo.real rect{ fill:var(--ink); }
.nodo text, .eti{ font:500 14px 'Plus Jakarta Sans',system-ui,sans-serif; fill:var(--ink-dim); }
.nodo .num{ fill:var(--cian); font-weight:700; }
.nodo{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.js .camino{ stroke-dasharray:var(--largo); stroke-dashoffset:var(--largo); animation:traza 2.2s .3s cubic-bezier(.6,0,.2,1) forwards; }
.js .nodo{ opacity:0; animation:aparece .4s forwards; }
@keyframes traza{ to{ stroke-dashoffset:0; } }
@keyframes aparece{ to{ opacity:1; } }
.lectura{ position:absolute; left:0; bottom:-6px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-dim); font-variant-numeric:tabular-nums; }

/* Secciones */
section{ padding:70px 0 0; }
h2{ font-size:clamp(26px,4vw,38px); line-height:1.12; letter-spacing:-.015em; margin:0; font-weight:700; text-align:center; }
h3{ margin:0; }
.subtitulo{ text-align:center; color:var(--ink-dim); margin:8px 0 0; font-size:17px; }

/* Juego */
.juego{
  margin-top:36px; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:36px; padding:32px 36px;
}
.juego-icono{ width:140px; height:140px; border-radius:32px; box-shadow:0 20px 40px -18px rgba(0,0,0,.6); }
.juego-tipo{ margin:0; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--trazen-a); }
[data-theme="light"] .juego-tipo{ color:var(--trazen-b); }
.juego h3{ font-size:30px; letter-spacing:-.01em; margin-top:4px; }
.juego-txt > p:not(.juego-tipo){ margin:10px 0 0; color:var(--ink-dim); font-size:16.5px; max-width:560px; }
.juego .botones{ margin-top:22px; }
.pildoras{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.pildoras li{ font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--panel-alt); border:1px solid var(--line); }

/* Valores */
.rejilla{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
.valor{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.valor svg{ width:30px; height:30px; color:var(--cian); }
.valor h3{ font-size:18px; margin-top:14px; }
.valor p{ margin:6px 0 0; color:var(--ink-dim); font-size:15px; }

/* Contacto */
.contacto{
  text-align:center; background:linear-gradient(135deg,var(--panel),var(--panel-alt)); border:1px solid var(--line);
  border-radius:36px; padding:40px 24px;
}
.contacto{ display:grid; grid-template-columns:auto 1fr; gap:24px 48px; align-items:center; text-align:left; padding:40px 48px; }
.contacto-logo img{ width:170px; height:auto; }
.contacto h2{ text-align:left; }
.contacto-cuerpo > p{ color:var(--ink-dim); max-width:520px; margin:12px 0 0; font-size:17px; }
.contacto .botones{ justify-content:flex-start; }
.btn-insta svg{ stroke:url(#igGrad); }

footer{ margin-top:70px; border-top:1px solid var(--line); padding:26px 0 40px; color:var(--ink-dim); font-size:14px; }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; }
footer nav{ display:flex; gap:22px; flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--ink); text-decoration:underline; }
/* Apoyo (Ko-fi): solo en el pie, discreto y en el naranja cálido de «Apoya a Trazen» de la app */
footer a.apoyo-pie{ display:inline-flex; align-items:center; gap:6px; color:#ff8f45; font-weight:700; }
[data-theme="light"] footer a.apoyo-pie{ color:#f0761a; }
footer .apoyo-pie svg{ width:14px; height:14px; fill:currentColor; stroke:none; }

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; text-align:center; padding-top:16px; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .hero .botones{ justify-content:center; }
  /* En móvil: título, gráfico y texto (el bloque de texto se deshace para intercalar el gráfico) */
  .hero{ row-gap:22px; }
  .hero > div:first-child{ display:contents; }
  .hero h1{ order:1; }
  .escena{ order:2; max-width:420px; margin:0 auto; width:100%; }
  .hero .sub{ order:3; margin-top:0; }
  .hero .botones{ order:4; margin-top:0; }
  .juego{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:28px 20px; }
  .juego .botones, .pildoras{ justify-content:center; }
  .rejilla{ grid-template-columns:1fr; }
  .contacto{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:36px 22px; }
  .contacto h2{ text-align:center; } .contacto-cuerpo > p{ margin-left:auto; margin-right:auto; } .contacto .botones{ justify-content:center; }
  .contacto-logo img{ width:130px; }
}
@media (max-width:480px){
  .marca img{ height:24px; }
  .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .camino{ animation:none; stroke-dashoffset:0; }
  .js .nodo{ animation:none; opacity:1; }
  .nodo{ transition:none; }
}