/* Marca Wordbox Studios (marca/brand-board.md): Negro Cine, amarillo solo para lo
   importante, Raleway + Space Mono, sin esquinas redondeadas y sin azul. */
:root{
  color-scheme:dark;
  --bg:#0D0D0D; --surface:#1C1C1C; --line:#3A3A3A; --fg:#F5F1E8; --body:#C9C9C9; --muted:#8C8C8C;
  --accent:#FFC500; --accent-ink:#0D0D0D;
  --burdeos:#8C1C2B; --mostaza:#C9962B; --petroleo:#0F5E54;
  /* Estados: los tonos de la marca, aclarados para que se lean sobre negro. */
  --ok:#5FB8A8; --warn:#C9962B; --crit:#E8788A;
  --font:Raleway,Montserrat,system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;padding-inline:20px;padding-block:0 48px;
  padding-top:env(safe-area-inset-top,0px)}
/* Grano de película, siempre sutil */
body::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:var(--accent)}
em{font-style:normal;color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto}
.dato{font-family:var(--mono)}
.etiqueta{font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.franja{display:flex;flex-direction:column;gap:3px;width:120px}
.franja i{display:block;height:5px}
.franja i:nth-child(1){background:var(--burdeos)}
.franja i:nth-child(2){background:var(--mostaza)}
.franja i:nth-child(3){background:var(--petroleo)}

/* barra con pestañas */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px;border-bottom:1px solid var(--line)}
.marca{display:block;width:124px;color:var(--fg);text-decoration:none}
.marca img{display:block;width:100%;height:auto}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{padding:8px 13px;border:1px solid transparent;color:var(--body);text-decoration:none;font-weight:700;font-size:13px}
.tab:hover{color:var(--accent)}
.tab[aria-current="page"]{color:var(--fg);border-color:var(--line)}

h1,h2{line-height:1;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,72px);font-weight:900;letter-spacing:-.02em;line-height:.95}
h2{font-size:24px;font-weight:900;letter-spacing:-.01em}
p{margin:0}
.mut{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border:1px solid var(--line);
  background:transparent;color:var(--fg);font:700 15px var(--font);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:800}
.btn.pri:hover{color:var(--accent-ink);filter:brightness(1.06)}
.btn:disabled{opacity:.55;cursor:default}

.card{background:var(--surface);border:1px solid var(--line);padding:28px}
label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px;color:var(--body)}
input,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--fg);font:15px var(--font)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.msg{min-height:22px;margin-top:12px;font-size:14px}
.msg.err{color:var(--crit)}
.msg.ok{color:var(--ok)}
.pill{display:inline-block;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pill.ok{background:rgba(15,94,84,.35);color:var(--ok)}
.pill.warn{background:rgba(201,150,43,.18);color:var(--warn)}
.pill.off{background:rgba(140,140,140,.16);color:var(--body)}