/* =============================================================================
   redbachiller · SISTEMA DE DISEÑO — punto único.
   Tokens + base + componentes compartidos del sistema editorial-kinético.
   Todas las páginas enlazan este fichero: cambiar el diseño = tocar aquí.
   Lo específico de cada página vive en su propio <style> (game, quiz, spine…).
   Comportamiento (grano, reveals, count-up, Lucide) → sistema.js
   Las fuentes se sirven bundleadas por @fontsource desde el layout Base;
   aquí solo se referencian sus familias (sin @import a CDN).
   ============================================================================= */

:root{
  /* Paleta — el duotono + acentos. Cambia aquí y cambia todo. */
  --paper:#ebe8de; --paper-2:#e3dfd2; --ink:#0f0e13; --muted:#5f5d57; --line:#d8d3c6;
  --accent:#3b2bff;   /* azul eléctrico (acción) */
  /* REGLA DE USO — acento tipográfico sobre fondos TINTA = --accent-bright (AA 6.4:1 en --ink).
     El azul saturado (--accent) no llega a AA sobre tinta (≈2.7:1): se reserva para fondos
     claros (papel/papel-2) y para SUPERFICIES de botón con texto blanco. Espejo: @theme
     --color-brand-bright en src/styles/global.css. */
  --accent-bright:#8f85ff;
  --pop:#ff4a1e;      /* bermellón de corrección (superficies/trazos; como TEXTO usa --pop-ink) */
  --pop-ink:#b52c0f;  /* bermellón profundo — texto/borde bermellón sobre papel y papel-2 (AA) */
  --ok:#1f9e63; --ok-soft:#e2f0e6;
  --ok-ink:#136c42;   /* jade profundo — texto verde sobre papel y papel-2 (AA) */
  --amber:#e5a11a;
  /* Tipografía (familias bundleadas por @fontsource en el layout) */
  --sans:"Inter Variable","Inter",system-ui,sans-serif;
  --display:"Bricolage Grotesque Variable","Inter Variable",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  /* Movimiento */
  --e:cubic-bezier(.19,1,.22,1); --spring:cubic-bezier(.34,1.5,.64,1);
  /* Métrica */
  --maxw:74rem;
  --radius:12px;      /* radio de control (espejo de --radius en global.css @theme) */
  --bar-h:62px;       /* altura de la barra superior (.bar) */
  --ctl-h:48px;       /* altura única de controles de formulario (input/select/botón) */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
img,svg{display:block;max-width:100%}

/* Contenedor + utilidades */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;font-size:.72rem}
.ital{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}

/* Grano (lo inyecta sistema.js como .grain; aquí su pintura) */
.grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.grain--light{mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}


/* Botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:1rem;padding:.8rem 1.4rem;border:none;border-radius:var(--radius);cursor:pointer;background:var(--ink);color:var(--paper);transition:transform .24s var(--spring),box-shadow .24s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--accent{background:var(--accent);color:#fff}
.btn--out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--out:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:.5rem 1rem;font-size:.88rem;border-radius:10px}
.btn--big{padding:1.05rem 2rem;font-size:1.05rem}
.btn--ctl{height:var(--ctl-h);padding-block:0}   /* botón a la altura exacta de input/select */

/* Formularios — UNA sola forma: borde 1.5px tinta, radio var(--radius), altura var(--ctl-h).
   .field (label+control+hint) · .label · .input · .select · .hint (estados del sistema). */
.field{display:flex;flex-direction:column;gap:.4rem;width:100%;min-width:0}
.label{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.input,.select{appearance:none;-webkit-appearance:none;width:100%;height:var(--ctl-h);font-family:var(--sans);font-size:1rem;color:var(--ink);background-color:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius);padding-inline:1rem;transition:border-color .2s,box-shadow .2s}
.input::placeholder{color:var(--muted);opacity:1}
.input:focus-visible,.select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
.input:disabled,.select:disabled{opacity:.45;cursor:not-allowed}
/* Chevron propio del select (SVG inline; el trazo es la tinta --ink, #0f0e13 — no es un color nuevo) */
.select{padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%230f0e13' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.select:has(option[value=""]:checked){color:var(--muted)}   /* opción vacía = tono placeholder */
/* Área de texto — misma forma que .input (componer class="input textarea"); crece solo en vertical */
.textarea{height:auto;min-height:9.5rem;padding-block:.7rem;resize:vertical;line-height:1.55}
.hint{font-size:.85rem;color:var(--muted);line-height:1.45}
.hint--ok{color:var(--ok-ink)}
.hint--soft{font-family:var(--serif);font-style:italic}   /* aviso suave: serif a mano, nunca rojo */

/* Barra superior */
.bar{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--ink)}
.bar__in{display:flex;align-items:center;justify-content:space-between;height:var(--bar-h);gap:1rem}
.brand{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.brand b{color:var(--accent)}
.bar__nav{display:none;gap:1.5rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bar__nav a{display:inline-flex;align-items:center;min-height:2.75rem}   /* área táctil ≥44px sin mover el layout */
.bar__nav a:hover,.bar__nav a.on{color:var(--ink)}
@media(min-width:820px){.bar__nav{display:flex}}

/* Eyebrow / kicker */
.kick{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);display:inline-flex;align-items:center;gap:.6rem}

/* Numeral gigante de sección */
.numeral{position:absolute;font-family:var(--display);font-weight:800;line-height:1;color:var(--ink);opacity:.05;pointer-events:none;z-index:0}

/* Subrayado dibujado a mano (mete dentro un <svg viewBox="0 0 600 40"><path d="M6 26 C 150 8, 360 8, 594 22"/></svg>) */
.mark{position:relative;color:var(--accent)}
.mark svg{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.4em;overflow:visible}
.mark path{fill:none;stroke:var(--pop);stroke-width:9;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;transition:stroke-dashoffset 1.1s var(--e) .5s}
.reveal .mark path,.in .mark path,.mark.drawn path{stroke-dashoffset:0}

/* Sello rotado */
.stamp{display:inline-grid;place-items:center;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--pop-ink);border:1.5px solid var(--pop-ink);border-radius:999px;padding:.5rem 1rem;rotate:-6deg;text-align:center;line-height:1.3}

/* Chip / badge */
.chip{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;padding:.35rem .6rem;border:1.5px solid var(--ink);border-radius:999px;display:inline-flex;align-items:center;gap:.35rem}
.chip svg{width:.85rem;height:.85rem}

/* Marquee */
.mq{border-block:1.5px solid var(--ink);padding-block:1.1rem;overflow:hidden;background:var(--ink);color:var(--paper)}
.mq__t{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;animation:mq-slide 26s linear infinite;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.5vw,2rem);letter-spacing:-.01em}
.mq__t span{display:flex;align-items:center;gap:2.5rem}
.mq__t span::after{content:"✳";color:var(--accent-bright)}   /* sobre tinta: accent-bright (regla AA) */
@keyframes mq-slide{to{transform:translateX(-50%)}}

/* Bento */
.b{position:relative;overflow:hidden;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:6px;padding:1.5rem;display:flex;flex-direction:column;transition:transform .35s var(--e),background .3s,color .3s}
.b:hover{transform:translateY(-5px);background:var(--ink);color:var(--paper)}
.b:hover p,.b:hover .b__k{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.b h3{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.b p{color:var(--muted);font-size:.92rem;margin-top:.35rem}
.b__k{margin-top:auto;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.b--fill{background:var(--accent);color:#fff;border-color:var(--accent)}
.b--fill:hover{background:var(--ink);border-color:var(--ink)}
.b--paper{background:var(--paper)}   /* variante sobre secciones paper-2 (el hover sigue invirtiendo) */
/* Contraste en la inversión: sobre azul o tinta el texto secundario nunca queda muted-fantasma */
.b--fill p,.b--fill .b__k{color:color-mix(in oklab,#fff 84%,transparent)}

/* Kicker con línea (modifier opt-in; el kicker liso sigue siendo el base) */
.kick--line{display:flex;align-items:center}
.kick--line::before{content:"";width:1.8rem;height:1.5px;background:currentColor;flex:none}

/* Bento — art-direction reutilizable (flecha, numeral grande, icono, spans) */
.b .arrow{position:absolute;top:1.3rem;right:1.3rem;line-height:0;transition:transform .3s var(--e)}
.b .arrow svg{width:1.25rem;height:1.25rem}
.b:hover .arrow{transform:translate(4px,-4px);color:var(--accent-bright)}   /* la card invierte a tinta: accent-bright */
.b:hover.b--fill .arrow{color:#fff}
.b .huge-n{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,5vw,4rem);letter-spacing:-.03em;line-height:1;color:var(--nn,currentColor)}
.b:hover .huge-n{color:var(--paper)}   /* al invertir a tinta, el numeral pasa a papel (contraste AA) */
.b__ic{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:10px;background:color-mix(in oklab,var(--ink) 8%,transparent);margin-bottom:.9rem;color:var(--ink)}
.b:hover .b__ic{background:color-mix(in oklab,var(--paper) 18%,transparent);color:var(--paper)}
.b__ic svg{width:1.35rem;height:1.35rem;stroke-width:2}
.b--fill .b__ic{background:rgba(255,255,255,.18);color:#fff}
@media(min-width:960px){.b--w{grid-column:span 2}.b--t{grid-row:span 2}}

/* Stats gigantes */
.stat b{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.9;display:block;font-size:clamp(2.6rem,6vw,4.5rem)}
.stat span{color:var(--muted);font-size:.9rem;margin-top:.4rem;display:block}

/* Selector de temas (arcade, memory, juegos data-driven) */
.topics{display:flex;gap:.5rem;flex-wrap:wrap}
.topic{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;padding:.45rem .9rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);cursor:pointer;color:inherit}
.topic[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Tarjeta de juego (arcade + hubs) — motor «un juego, mil temas» */
.game{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--paper-2);border:1.5px solid var(--ink);border-radius:6px;padding:1.6rem;min-height:14rem;transition:transform .35s var(--e),background .3s,color .3s}
.game:hover{transform:translateY(-6px);background:var(--ink);color:var(--paper)}
.game:hover p,.game:hover .game__meta{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.game .ic{width:3rem;height:3rem;border-radius:12px;display:grid;place-items:center;background:color-mix(in oklab,var(--cc,var(--accent)) 16%,var(--paper));color:var(--cc,var(--accent));margin-bottom:auto}
.game:hover .ic{background:rgba(255,255,255,.16);color:var(--paper)}
.game .ic svg{width:1.5rem;height:1.5rem}
.game h3{font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;margin-top:1.2rem}
.game p{color:var(--muted);font-size:.92rem;margin-top:.35rem}
.game__meta{margin-top:1rem;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:flex;gap:.5rem;align-items:center}
.game__meta svg{width:.9rem;height:.9rem}
.game .arrow{position:absolute;top:1.4rem;right:1.4rem;transition:transform .3s var(--e)}
.game:hover .arrow{transform:translate(3px,-3px)}
.game.soon{opacity:.62;pointer-events:none}
.game .badge{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--pop-ink);border:1.5px solid var(--pop-ink);border-radius:999px;padding:.2rem .5rem;position:absolute;top:1.4rem;right:1.4rem}

/* Anillo de progreso conic (usa data-ring="N", sistema.js pone --p) */
.ring{--p:0;width:8rem;height:8rem;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),color-mix(in oklab,var(--ink) 10%,var(--paper)) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 12px));mask:radial-gradient(farthest-side,transparent calc(100% - 12px),#000 calc(100% - 12px));transition:--p 1.2s var(--e),background .3s}

/* Reveal escalonado (data-rvl; sistema.js activa .rvl-on y añade .in + failsafe) */
.rvl-on [data-rvl]{opacity:0;transform:translateY(22px)}
[data-rvl]{transition:opacity .7s var(--e),transform .8s var(--e);transition-delay:calc(var(--i,0)*.06s)}
.rvl-on [data-rvl].in{opacity:1;transform:none}

/* Pie común */
.foot{border-top:1.5px solid var(--ink);padding-block:2rem;color:var(--muted);font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}
.foot .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* Pie de sitio (variante completa): wordmark + tagline + columnas de nav + meta */
.foot--site{background:var(--paper-2);padding-block:2.6rem 1.5rem}
.foot--site .foot__main{align-items:flex-start;gap:2rem}
.foot__brand .brand{color:var(--ink);text-transform:none;letter-spacing:-.03em}
.foot__tag{font-family:var(--serif);font-style:italic;font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:.4rem}
.foot__nav{display:flex;flex-direction:column;gap:.15rem}
.foot__nav a,.foot__meta a{display:inline-flex;align-items:center;min-height:2rem}
@media(pointer:coarse){.foot__nav a,.foot__meta a{min-height:2.75rem}}   /* táctil: ≥44px */
.foot__nav a:hover,.foot__meta a:hover{color:var(--ink)}
.foot__meta a[href^="mailto:"]{text-transform:lowercase}   /* el email se lee en minúscula */
.foot--site .foot__meta{margin-top:2.2rem;padding-top:1.2rem;border-top:1.5px solid var(--line)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rvl-on [data-rvl]{opacity:1!important;transform:none!important}
  .mark path{stroke-dashoffset:0!important}
  html{scroll-behavior:auto}
}