/* marco.css — tokens, cabecera, menú en capas, pie y botón de volver arriba de stockerfy.app
 * (24-oct-2026). Las mismas reglas de la portada v5 (src/home.html), para las páginas que no son
 * la portada: /analisis/ y las que vengan. Va después de comun/mov.css y antes del CSS propio de
 * cada página. El marcado sale de src/marco.py; el comportamiento, de comun/marco.js. */
  :root{
    --burgundy:#910713; --cream:#f5e5ba;
    --bg:#0d0a0b; --bg-2:#120e0f; --surf:#171214; --elev:#221a1d;
    --fg-1:#f5ecd9; --fg-2:#b8a99a; --fg-3:#897a70;
    --rule:rgba(var(--ink),0.12); --rule-2:rgba(var(--ink),0.22); --rule-3:rgba(var(--ink),0.34);
    --pos:#3aa771; --neg:#d63743;
    --ax-q:#7193f5; --ax-g:#a684f4; --ax-v:#ec6ba8; --ax-m:#c2ab82; --ax-r:#93a3b9;
    --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --serif:'Frank Ruhl Libre','Source Serif Pro',Georgia,serif;
    --mono:'JetBrains Mono','Menlo','Consolas',monospace;
    --e-o3:cubic-bezier(.16,1,.3,1); --e-io3:cubic-bezier(.76,0,.24,1); --e-os:cubic-bezier(.625,.05,0,1);
    /* tokens que usan las figuras de explica.js (los mismos nombres de hawk/app.css) */
    --brand-cream:var(--cream); --brand-burgundy:var(--burgundy); --bg-base:var(--bg);
    --border-1:var(--rule); --border-2:var(--rule-2); --border-3:var(--rule-3);
    --font-sans:var(--sans); --font-serif:var(--serif); --font-mono:var(--mono);
    --xp-bg:rgba(var(--ink),.018); --ring:0 0 0 3px rgba(var(--ink),.13);
    /* escala fluida de 320 a 1440 px */
    --fs-hero:clamp(2.6rem, 1.2rem + 4.4vw, 5.8rem);
    --fs-h2:clamp(2.3rem, 1.35rem + 3.9vw, 5.4rem);
    --fs-h3:clamp(1.85rem, 1.35rem + 2vw, 3.3rem);
    --fs-lede:clamp(1.05rem, .97rem + .4vw, 1.3rem);
    --sp-sec:clamp(104px, 56px + 9vw, 220px);
    --gut:clamp(16px, 4px + 3vw, 48px);
    --hd-h:72px;
    /* tema: canales RGB para transparencias; puntos del campo de bajo a alto Master Score */
    --ink:245,229,186; --paper:13,10,11; --scrim:8,6,7; --elev-rgb:34,26,29;
    --elev-2:#2c2226; --hueco:#3a2f33; --on-burgundy:#f5e5ba;
    --dot-lo:74,63,59; --dot-hi:248,232,190; --acc-rgb:224,72,82;
    --c-sc:145,7,19; --c-sd:232,198,106; --c-fo:79,179,165;
    --sc-t:#e0606a; --sd-t:#e8c66a; --fo-t:#5fc4b6;
  }
  html[data-tema="claro"]{
    --cream:#1c120e;
    --bg:#f6f1e7; --bg-2:#efe8db; --surf:#fffcf6; --elev:#ffffff;
    --fg-1:#1f1612; --fg-2:#574841; --fg-3:#6f5f55;
    --ink:52,30,22; --paper:246,241,231; --scrim:44,28,22; --elev-rgb:255,255,255;
    --rule:rgba(var(--ink),.13); --rule-2:rgba(var(--ink),.22); --rule-3:rgba(var(--ink),.34);
    --pos:#18804d; --neg:#c0222f;
    --ax-q:#1f4fd1; --ax-g:#6d28d9; --ax-v:#be185d; --ax-m:#8a6d3b; --ax-r:#56657a;
    --elev-2:#e9dfcf; --hueco:#ddd2c0;
    --xp-bg:rgba(var(--ink),.025); --ring:0 0 0 3px rgba(145,7,19,.16);
    --dot-lo:206,194,178; --dot-hi:58,30,22; --acc-rgb:170,16,30;
    --sc-t:#a3101d; --sd-t:#8f6508; --fo-t:#1f7f72;
  }
  html[data-tema="claro"] ::selection{background:var(--burgundy);color:var(--on-burgundy)}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-padding-top:calc(var(--hd-h) + 12px)}
  body{background:var(--bg); color:var(--fg-1); font-family:var(--sans); font-size:16px; line-height:1.6;
       -webkit-font-smoothing:antialiased; overflow-x:clip}
  ::selection{background:var(--burgundy);color:var(--cream)}
  a{color:inherit}
  img{max-width:100%}
  .wrap{max-width:1400px; margin:0 auto; padding-inline:var(--gut)}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
  .vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

  /* ── Aparición (fx.js: FX.reveal) y titulares palabra por palabra ─────── */
  .js [data-rv]{opacity:0; transform:translateY(18px)}
  .js [data-rv].rv-in{opacity:1; transform:none; transition:opacity .7s var(--e-o3) var(--rv-d,0s), transform .9s var(--e-o3) var(--rv-d,0s)}
  .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
  .w > span{display:inline-block}
  .js [data-split] .w > span{transform:translateY(108%) rotate(4deg); transform-origin:0 100%}
  .js [data-split].in .w > span{transform:none; transition:transform 1s var(--e-o3) var(--d,0s)}
  .w.wz{overflow:visible}
  .js [data-split] .w.wz > span{opacity:0; transform:translateY(40%)}
  .js [data-split].in .w.wz > span{opacity:1; transform:none; transition:transform 1s var(--e-o3) var(--d,0s), opacity .6s ease var(--d,0s)}
  @media (prefers-reduced-motion:reduce){
    .js [data-rv], .js [data-split] .w > span{opacity:1!important; transform:none!important; transition:none!important}
  }

  /* ── Cabecera ─────────────────────────────────────────────────────────── */
  .hd{position:sticky; top:0; z-index:60; transition:background .35s, border-color .35s}
  .hd-in{display:flex; align-items:center; gap:24px; height:var(--hd-h); transition:height .4s var(--e-o3)}
  .hd.scrolled{background:rgba(var(--paper),.74); -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25); border-bottom:1px solid var(--rule)}
  .hd:not(.scrolled){border-bottom:1px solid transparent}
  .hd.scrolled .hd-in{height:60px}
  .brand{display:flex; align-items:center; gap:11px; text-decoration:none}
  .brand img{width:30px; height:30px; display:block; transition:transform .7s var(--e-os)}
  .brand:hover img{transform:rotate(-20deg)}
  .brand b{font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:-.01em}
  .nav{position:relative; display:flex; gap:2px; margin-left:auto; padding:4px; border-radius:999px; border:1px solid var(--rule); background:rgba(var(--paper),.35);
       -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .nav a{position:relative; z-index:1; text-decoration:none; font-size:14.5px; font-weight:500; color:var(--fg-2); padding:8px 15px; border-radius:999px; transition:color .25s}
  .nav a:hover{color:var(--fg-1)}
  .nav-ind{position:absolute; z-index:0; top:4px; bottom:4px; left:0; border-radius:999px; background:rgba(var(--ink),.09); width:0; opacity:0;
    transition:transform .5s var(--e-os), width .5s var(--e-os), opacity .25s}
  .hd .bt--chico{margin-left:2px}
  .hd-dr{display:flex; align-items:center; gap:12px}
  .hd-prog{position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--cream); transform-origin:left; transform:scaleX(var(--prog,0)); opacity:.6; pointer-events:none}
  .hd:not(.scrolled) .hd-prog{opacity:0}
  @media (max-width:1080px){ .nav, .hd .bt--chico{display:none} .hd-dr{margin-left:auto} }
  @media (max-width:360px){ .hd-dr{gap:8px} .brand{gap:8px} .brand b{font-size:18px} .brand img{width:26px; height:26px} }
  footer{position:relative; margin-top:var(--sp-sec); border-top:1px solid var(--rule); overflow:hidden; padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .ft{display:grid; grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr)); gap:32px; padding-block:56px 40px}
  .ft .disc{margin:18px 0 0; max-width:46ch; font-size:14px; color:var(--fg-3)}
  .ft .disc strong{color:var(--fg-2)}
  .ft nav{display:flex; flex-direction:column; gap:2px}
  .ft nav b{font:500 12.5px var(--mono); color:var(--fg-3); margin-bottom:10px}
  .ft nav a{text-decoration:none; color:var(--fg-2); font-size:15px; padding:6px 0; transition:color .2s}
  .ft nav a:hover{color:var(--fg-1)}
  .gig{display:block; font:600 clamp(5rem, 1rem + 20.5vw, 21.5rem)/.8 var(--serif); letter-spacing:-.055em; text-align:center; margin:.2em calc(-1 * var(--gut)) -.08em; white-space:nowrap; user-select:none;
    background:linear-gradient(180deg, rgba(var(--ink),.5) 0%, rgba(var(--ink),.05) 82%); -webkit-background-clip:text; background-clip:text; color:transparent}
  .gig span{display:inline-block; transform:translateY(60%); opacity:0; transition:transform 1.2s var(--e-o3) calc(var(--i) * .05s), opacity .8s ease calc(var(--i) * .05s);
    background:inherit; -webkit-background-clip:text; background-clip:text}
  .gig.on span{transform:none; opacity:1}
  .ft-b{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--fg-3); padding-top:18px; border-top:1px solid var(--rule)}
  @media (max-width:820px){ .ft{grid-template-columns:repeat(2, minmax(0,1fr))} .ft > div:first-child{grid-column:1 / -1} }

  /* ── Botón de volver arriba con el anillo de avance ───────────────────── */
  .up{position:fixed; right:var(--gut); bottom:calc(26px + env(safe-area-inset-bottom)); z-index:55; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
    background:rgba(var(--paper),.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); text-decoration:none; color:var(--fg-1);
    opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .35s, transform .45s var(--e-os)}
  .up.on{opacity:1; transform:none; pointer-events:auto}
  .up svg{position:absolute; inset:0; transform:rotate(-90deg)}
  .up circle{fill:none; stroke-width:1.5}
  .up .u0{stroke:var(--rule-2)} .up .u1{stroke:var(--cream); stroke-dasharray:150.8; stroke-dashoffset:calc(150.8 * (1 - var(--prog,0)))}
  .up b{font-size:18px; transition:transform .4s var(--e-os)} .up:hover b{transform:translateY(-3px)}
  @media (max-width:760px){ .up{bottom:calc(84px + env(safe-area-inset-bottom)); width:48px; height:48px}
    /* la franja de instalar ocupa de 78 a ~136 px: el botón sube por encima */
    body:has(.sf-franja) .up{bottom:calc(148px + env(safe-area-inset-bottom))} }

  /* ── Menú en capas: contenido propio ──────────────────────────────────── */
  .capa-nav .cm svg{width:100%; height:100%; display:block}
  .capa-nav .cm.ic{display:grid; place-items:center; border-radius:10px; border:1px solid rgba(245,229,186,.3)} .capa-nav .cm.ic svg{width:22px; height:22px}
  .capa-p .brand b{color:#f5e5ba}

  /* ── Piezas de página interior ────────────────────────────────────────── */
  .ey{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--fg-2)}
  .ey i{width:7px; height:7px; border-radius:50%; background:var(--pos); box-shadow:0 0 0 4px rgba(58,167,113,.16)}