/* sitio.css — piezas comunes de stockerfy.app (16-oct-2026). Ver sitio.js.
   Mismo material que el Scan: superficies planas, filete de 1px, sin degradados. */

/* Tokens del Scan (hawk/app.css) para las páginas que no cargan app.css y usan el
   panel de cuenta: en <body class="sf-chrome"> (Stockdle, Folio) y, para no tocar los
   tokens propios de la portada, también sobre el panel y el botón mismos. Los valores
   son los de hawk/app.css, así que en el Scan no cambian nada. */
.sf-chrome, .ac-panel, .ac-velo, .acct-slot, .ac-aviso{
  --brand-burgundy:#910713; --brand-cream:#f5e5ba;
  --bg-base:#0d0a0b; --bg-sunken:#090708; --bg-surface:#171214; --bg-elevated:#221a1d; --bg-hover:#2b2023;
  --border-1:rgba(245,229,186,0.08); --border-2:rgba(245,229,186,0.16); --border-3:rgba(245,229,186,0.28);
  --accent:#910713; --accent-deep:#5a0008;
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,0.80); --ring:0 0 0 3px rgba(245,229,186,0.13);
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Frank Ruhl Libre','Source Serif Pro',Georgia,serif;
  --font-mono:'JetBrains Mono','Menlo','Consolas',monospace;
  --dur-hover:120ms; --dur-base:200ms; --ease:cubic-bezier(0.2,0.8,0.2,1);
}
.sf-chrome{--rail-w:0px}
.ac-panel.hidden, .ac-velo.hidden{display:none!important}
.acct-slot.icon-btn{display:flex;align-items:center;justify-content:center;background:var(--bg-surface);
  border:1px solid var(--border-2);color:var(--fg-2);cursor:pointer;padding:0;overflow:hidden;
  transition:border-color var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease)}
.acct-slot.icon-btn:hover{color:var(--fg-1);border-color:var(--border-3)}
.acct-slot.icon-btn svg{width:18px;height:18px}
[data-cuenta]{display:flex;align-items:center}

/* Punto de "quedan juegos de hoy" */
.sf-punto{display:none;width:7px;height:7px;border-radius:50%;background:#e8c66a;box-shadow:0 0 0 2px rgba(13,10,11,.9)}
.sf-punto.on{display:block}
.sf-punto--txt.on{display:inline-block;margin-left:6px;vertical-align:2px}

/* ── Scan: Stockdle y Folio en el raíl ─────────────────────────────────── */
.rail-nav .nav-sep{display:block;height:1px;margin:8px 14px;background:var(--border-1)}
.rail-nav .nav-x{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 3px 9px;border-radius:12px;color:var(--fg-3);text-decoration:none;
  font:600 9.5px/1 var(--font-sans);letter-spacing:.03em;
  transition:color var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.rail-nav .nav-x svg{width:21px;height:21px}
.rail-nav .nav-x:hover{color:var(--fg-1);background:rgba(245,229,186,.045)}
.rail-nav .nav-x:focus-visible{outline:none;box-shadow:var(--ring)}
.rail-nav .nav-x .sf-punto{position:absolute;top:9px;left:calc(50% + 8px)}
@media (max-width:1000px) and (min-width:761px){ .rail-nav .nav-x > span:not(.sf-mk){display:none} .rail-nav .nav-x{padding:12px 3px} }
@media (max-width:760px){
  .rail-nav .nav-sep{display:none}
  .rail-nav .nav-x{flex:1 1 0;justify-content:center;gap:4px;padding:8px 0 6px;font-size:10.5px;min-width:0}
  .rail-nav .nav-x > span:not(.sf-mk){display:block}
  .rail-nav .nav-x svg{width:22px;height:22px}
  .rail-nav .nav-x .sf-punto{top:6px}
  /* seis botones en 390 px: el texto se achica un punto para que "Glosario" y "Stockdle" quepan */
  .rail-nav .nav-item, .rail-nav .nav-x{font-size:10px;letter-spacing:0}
}

/* ── Barra inferior en el teléfono (fuera del Scan) ─────────────────────── */
.sf-tabs{display:none}
@media (max-width:760px){
  .sf-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;height:calc(60px + env(safe-area-inset-bottom));
    padding:0 4px env(safe-area-inset-bottom);border-top:1px solid rgba(245,229,186,.16);background:rgba(13,10,11,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .sf-tabs a{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:#897a70;text-decoration:none;font:600 10.5px/1 'IBM Plex Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
  .sf-tabs a svg{width:22px;height:22px}
  .sf-tabs a.on{color:#f5e5ba}
  .sf-tabs a.on::before{content:"";position:absolute;top:0;left:50%;width:28px;height:2px;margin-left:-14px;background:#910713;border-radius:0 0 2px 2px}
  .sf-tabs a:active svg{transform:scale(.92)}
  .sf-tabs .sf-punto{position:absolute;top:8px;left:calc(50% + 8px)}
  body.sf-con-tabs{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  /* dentro de un juego la barra se va: el tablero y el teclado necesitan el alto */
  body.sf-sin-tabs .sf-tabs{display:none}
  body.sf-con-tabs.sf-sin-tabs{padding-bottom:0}
}

/* ── Marcas de producto (16-oct-2026): Scan, Stockdle, Folio ───────────── */
.sf-mk{--mk:20px; display:inline-flex; flex:none; width:var(--mk); height:var(--mk); line-height:0; vertical-align:middle}
.sf-mk svg{width:100%; height:100%; display:block; overflow:visible}
/* en la navegación de cabecera: marca chica antes del nombre */
header nav a.sf-prod{display:inline-flex; align-items:center; gap:7px}
header nav a.sf-prod .sf-mk{--mk:17px; transition:transform .35s cubic-bezier(.16,1,.3,1)}
header nav a.sf-prod:hover .sf-mk{transform:rotate(-8deg) scale(1.08)}
header nav a.sf-prod--scan.on, header nav a.sf-prod--scan[aria-current]{box-shadow:inset 0 -1.5px 0 #c4313d}
header nav a.sf-prod--stockdle.on, header nav a.sf-prod--stockdle[aria-current]{box-shadow:inset 0 -1.5px 0 #e8c66a}
header nav a.sf-prod--folio.on, header nav a.sf-prod--folio[aria-current]{box-shadow:inset 0 -1.5px 0 #4fb3a5}
/* lockup de producto en la cabecera de Stockdle y Folio: anillo de Stockerfy / marca + nombre */
.lk{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0}
.lk .sf-mk{--mk:28px}
.lk b{font-family:var(--serif,'Frank Ruhl Libre',Georgia,serif); font-weight:700; font-size:19px; letter-spacing:-.01em; white-space:nowrap}
.lk-sep{color:rgba(245,229,186,.28); font-size:22px; font-weight:300; margin:0 -4px; user-select:none}
.brand--solo b{display:none}
/* raíl del Scan y barra inferior */
.rail-nav .nav-x .sf-mk{--mk:22px; opacity:.82; transition:opacity .2s, transform .35s cubic-bezier(.16,1,.3,1)}
.rail-nav .nav-x:hover .sf-mk{opacity:1; transform:scale(1.08)}
@media (max-width:760px){
  .sf-tabs .sf-mk{--mk:22px; opacity:.6; filter:saturate(.55); transition:opacity .2s, filter .2s}
  .sf-tabs a.on .sf-mk{opacity:1; filter:none}
  .sf-tabs[data-prod=stockdle] a.on{color:#e8c66a}
  .sf-tabs[data-prod=stockdle] a.on::before{background:#e8c66a}
  .sf-tabs[data-prod=folio] a.on{color:#4fb3a5}
  .sf-tabs[data-prod=folio] a.on::before{background:#4fb3a5}
}
/* grande: se anima al aparecer */
.sf-mk--hero{--mk:clamp(52px,7vw,72px)}
.sf-mk--hero .mk-t{transform-box:fill-box; transform-origin:center; animation:mk-gira .55s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * .12s) both}
.sf-mk--hero .mk-b{transform-box:fill-box; transform-origin:bottom; animation:mk-crece .7s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i) * .1s) both}
.sf-mk--hero .mk-a{stroke-dasharray:100; animation:mk-dibuja 1s cubic-bezier(.16,1,.3,1) .15s both}
.sf-mk--hero .mk-a2{animation-delay:.75s}
.sf-mk--hero .mk-f{transform-box:fill-box; transform-origin:center; animation:mk-pop .5s cubic-bezier(.16,1,.3,1) both}
@keyframes mk-gira{from{transform:rotateX(90deg)}}
@keyframes mk-crece{from{transform:scaleY(0)}}
@keyframes mk-dibuja{from{stroke-dashoffset:100}}
@keyframes mk-pop{from{transform:scale(.6); opacity:0}}
@media (prefers-reduced-motion:reduce){ .sf-mk--hero *{animation:none!important} }