:root {
  --paper:  #f5f0e4;
  --paper2: #ede6d3;
  --paper3: #e4dcc6;
  --ink:    #181410;
  --ink2:   #45403a;
  --faint:  #8c8474;
  --rule:   #cfc6ad;
  --red:    #c0321f;
  --green:  #14672f;
  --ochre:  #976f1a;
  --blue:   #20498a;

  --display: 'Bricolage Grotesque', sans-serif;
  --serif:   'Instrument Serif', serif;
  --mono:    'IBM Plex Mono', monospace;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--display); font-weight: 400;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
/* grano de papel */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:999; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color:inherit; text-decoration:none; }
::selection { background:var(--ink); color:var(--paper); }
.mono { font-family:var(--mono); }
.num  { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ───────── CINTA TELEX ───────── */
.telex { background:var(--ink); color:var(--paper); height:36px; display:flex; align-items:stretch; overflow:hidden; }
.telex-label { background:var(--red); color:#fff; display:flex; align-items:center; padding:0 14px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:2px; white-space:nowrap; flex-shrink:0; }
.telex-track { display:flex; align-items:center; gap:64px; width:max-content; animation:telex 70s linear infinite; padding-left:24px; }
.telex-track:hover { animation-play-state:paused; }
.telex-item { font-family:var(--mono); font-size:11px; letter-spacing:.5px; white-space:nowrap; color:var(--paper); opacity:.92; }
.telex-item b { color:#f0c34e; font-weight:600; }
@keyframes telex { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ───────── CABECERA ───────── */
.masthead { padding: 26px clamp(16px,4vw,48px) 0; max-width:1280px; margin:0 auto; }
.mh-top { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink2); border-bottom:1px solid var(--ink); padding-bottom:8px; gap:12px; flex-wrap:wrap; }
.mh-top .ed { color:var(--red); font-weight:600; }
.mh-main { display:flex; justify-content:space-between; align-items:flex-end; padding:18px 0 14px; gap:24px; flex-wrap:wrap; }
.nameplate { font-size:clamp(44px,6vw,76px); font-weight:800; letter-spacing:-2.5px; line-height:.9; font-variant-ligatures:none; }
.nameplate i { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-1px; }
.nameplate .dot { color:var(--red); }
.mh-claim { font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink2); max-width:300px; text-align:right; line-height:1.4; }
.mh-rules { border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); height:7px; }
nav.sections { display:flex; justify-content:space-between; align-items:center; padding:0; border-bottom:1.5px solid var(--ink); box-shadow:0 3px 0 rgba(24,20,16,.06); position:sticky; top:0; background:var(--paper); z-index:200; gap:14px; }
.sec-links { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; }
.sec-links::-webkit-scrollbar{display:none}
.sec-links a { font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); padding:14px clamp(10px,1.6vw,20px); border-bottom:3px solid transparent; border-right:1px solid var(--rule); white-space:nowrap; transition:all .15s; }
.sec-links a:first-child { padding-left:2px; }
.sec-links a:last-child { border-right:none; }
.sec-links a:hover { color:var(--red); border-bottom-color:var(--red); background:var(--paper2); }
.sec-links a.on { color:var(--red); border-bottom-color:var(--red); }
.nav-cta { background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1px; padding:9px 16px; box-shadow:3px 3px 0 var(--red); transition:all .12s; white-space:nowrap; flex-shrink:0; }
.nav-cta:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--red); }

/* ───────── PORTADA ───────── */
.front { max-width:1280px; margin:0 auto; padding:clamp(36px,5vw,64px) clamp(16px,4vw,48px); display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.kicker { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--red); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.kicker::after { content:''; flex:1; height:1px; background:var(--rule); }
h1.head { font-size:clamp(52px,7vw,104px); font-weight:800; letter-spacing:-3.5px; line-height:.93; margin-bottom:24px; }
h1.head em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-2px; color:var(--red); }
.deck { font-size:18px; line-height:1.65; color:var(--ink2); max-width:560px; margin-bottom:28px; }
.deck strong { color:var(--ink); font-weight:600; }
.byline { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.5px; margin-bottom:30px; }
.front-data { border-top:1px solid var(--ink); max-width:560px; }
.fd-row { display:flex; align-items:baseline; padding:10px 2px; border-bottom:1px solid var(--rule); font-size:14px; }
.fd-row dt { color:var(--ink2); }
.fd-row .leader { flex:1; border-bottom:2px dotted var(--rule); margin:0 10px; transform:translateY(-4px); }
.fd-row dd { font-family:var(--mono); font-weight:600; font-size:15px; }
.fd-row dd small { color:var(--faint); font-weight:400; font-size:11px; }
.front-ctas { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border:1.5px solid var(--ink); transition:all .12s; background:transparent; color:var(--ink); }
.btn-ink { background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--red); }
.btn-ink:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red); }
.btn-line:hover { background:var(--ink); color:var(--paper); }

/* marcador de cuenta atrás */
.matchbox { border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--paper3); background:var(--paper); }
.matchbox-hd { background:var(--ink); color:var(--paper); padding:10px 16px; display:flex; justify-content:space-between; align-items:center; }
.matchbox-hd .t { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:2px; }
.matchbox-hd .live { width:7px; height:7px; background:var(--red); border-radius:50%; animation:blink 1.6s steps(2) infinite; }
@keyframes blink { 50%{opacity:.2} }
.cd-grid { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ink); }
.cd-cell { padding:18px 6px 12px; text-align:center; border-right:1px solid var(--rule); }
.cd-cell:last-child { border-right:none; }
.cd-n { font-family:var(--mono); font-size:clamp(30px,3vw,42px); font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.cd-l { font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--faint); margin-top:6px; }
.mb-rows { padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.mb-row { display:flex; align-items:baseline; font-size:12.5px; }
.mb-row .k { color:var(--ink2); }
.mb-row .leader { flex:1; border-bottom:2px dotted var(--rule); margin:0 8px; transform:translateY(-3px); }
.mb-row .v { font-family:var(--mono); font-size:11.5px; font-weight:600; }
.mb-next { margin:4px 16px 16px; border:1.5px dashed var(--ink); padding:10px 14px; font-size:13.5px; }
.mb-next .l { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--red); text-transform:uppercase; display:block; margin-bottom:3px; font-weight:600; }
.mb-next b { font-weight:700; }

/* ───────── SECCIONES ───────── */
section.cut { max-width:1280px; margin:0 auto; padding:clamp(40px,5vw,68px) clamp(16px,4vw,48px); }
.sec-head { display:flex; align-items:baseline; gap:18px; margin-bottom:8px; }
.sec-no { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--red); letter-spacing:1px; white-space:nowrap; }
.sec-title { font-size:clamp(32px,4vw,54px); font-weight:800; letter-spacing:-1.8px; line-height:1; text-transform:uppercase; }
.sec-title i { font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.5px; }
.sec-rule { border:none; border-top:3px solid var(--ink); margin:10px 0 6px; }
.sec-sub { display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--ink2); border-bottom:1px solid var(--rule); padding-bottom:10px; margin-bottom:30px; flex-wrap:wrap; }
.sec-sub .mono { font-size:11px; color:var(--faint); }

/* ───────── EL TABLÓN (value bets) ───────── */
.slips { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; }
.slip { border:1.5px dashed var(--ink); background:var(--paper); padding:18px 20px 16px; position:relative; transition:transform .15s, box-shadow .15s; }
.slip:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--paper3); }
.slip-stamp { position:absolute; top:12px; right:12px; border:2px solid var(--red); color:var(--red); font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.5px; padding:3px 8px; transform:rotate(6deg); opacity:.9; }
.slip-date { font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:1px; margin-bottom:6px; }
.slip-match { font-size:13.5px; color:var(--ink2); margin-bottom:2px; }
.slip-pick { font-size:20px; font-weight:700; letter-spacing:-.3px; margin-bottom:12px; }
.slip-line { display:flex; align-items:baseline; gap:16px; border-top:1px solid var(--rule); padding-top:12px; flex-wrap:wrap; }
.slip-odd { font-family:var(--mono); font-size:30px; font-weight:600; color:var(--green); }
.slip-meta { font-family:var(--mono); font-size:11px; line-height:1.7; }
.slip-meta .edge { color:var(--green); font-weight:600; }
.slip-kelly { margin-top:10px; font-size:12.5px; color:var(--ink2); border-top:2px dotted var(--rule); padding-top:9px; }
.slip-kelly b { font-weight:700; color:var(--ink); }
.slip-empty { grid-column:1/-1; border:1.5px dashed var(--rule); padding:34px; text-align:center; font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink2); }

/* ───────── LA PREVIA (picks) ───────── */
.previa-list { display:flex; flex-dire-column; flex-direction:column; gap:22px; }
.ficha { border:1.5px solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--paper3); animation:rise .4s cubic-bezier(.3,0,.2,1) backwards; }
.ficha:nth-child(2){animation-delay:70ms} .ficha:nth-child(3){animation-delay:140ms} .ficha:nth-child(4){animation-delay:210ms}
@keyframes rise { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.ficha-hd { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--ink); padding:8px 18px; font-family:var(--mono); font-size:10.5px; letter-spacing:1px; color:var(--ink2); gap:10px; flex-wrap:wrap; }
.ficha-hd .conf { font-weight:600; }
.c-alta  { color:var(--green); } .c-media { color:var(--ochre); } .c-baja  { color:var(--red); }
.ficha-body { display:grid; grid-template-columns:1fr 300px; }
.ficha-main { padding:20px 22px 18px; border-right:1px solid var(--rule); min-width:0; }
.teams { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin-bottom:18px; }
.team { min-width:0; }
.team.right { text-align:right; }
.t-flag { font-size:34px; line-height:1; }
.t-name { font-size:clamp(20px,2.2vw,28px); font-weight:800; letter-spacing:-1px; line-height:1.05; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-form { display:inline-flex; gap:3px; margin-top:7px; }
.fsq { width:17px; height:17px; border:1px solid var(--ink); font-family:var(--mono); font-size:9.5px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.fsq.V { background:var(--green); color:var(--paper); border-color:var(--green); }
.fsq.E { background:var(--paper); color:var(--ink); }
.fsq.D { background:var(--red); color:var(--paper); border-color:var(--red); }
.fsq.N { background:transparent; color:var(--rule); border-color:var(--rule); }
.vs { font-family:var(--serif); font-style:italic; font-size:20px; color:var(--faint); }
.prob-table { border-top:1px solid var(--ink); }
.prob-line { display:grid; grid-template-columns:120px 1fr 60px; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--rule); }
.prob-line .lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prob-line.win .lbl { color:var(--ink); font-weight:600; }
.bar-track { height:14px; background:repeating-linear-gradient(45deg, transparent 0 3px, var(--rule) 3px 4px); position:relative; }
.bar-fill { position:absolute; inset:0 auto 0 0; width:0%; background:var(--ink2); transition:width .9s cubic-bezier(.3,0,.2,1); }
.prob-line.win .bar-fill { background:var(--green); }
.prob-line .pct { font-family:var(--mono); font-size:14px; font-weight:600; text-align:right; }
.prob-line.win .pct { color:var(--green); }
.ficha-tags { display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--ink2); }
.ficha-tags span b { color:var(--ink); font-weight:600; }
.ficha-aside { padding:20px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; background:var(--paper2); }
.aside-lbl { font-family:var(--mono); font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--faint); }
.aside-pick { font-size:21px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.aside-score { border:1.5px solid var(--ink); border-radius:50px; padding:6px 22px; font-family:var(--mono); font-size:24px; font-weight:600; background:var(--paper); }
.aside-score small { display:block; font-size:8.5px; letter-spacing:1.5px; color:var(--faint); font-weight:400; }
.ficha-vb { border-top:1.5px dashed var(--ink); padding:12px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--paper); }
.vb-stamp { border:2px solid var(--red); color:var(--red); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.5px; padding:4px 10px; transform:rotate(-4deg); }
.ficha-vb .what { font-weight:700; font-size:15px; }
.ficha-vb .nums { font-family:var(--mono); font-size:11.5px; color:var(--ink2); display:flex; gap:14px; flex-wrap:wrap; }
.ficha-vb .nums b { color:var(--green); }

/* ───────── ALMANAQUE (grupos) ───────── */
.tabs { display:flex; gap:0; border:1.5px solid var(--ink); width:max-content; max-width:100%; overflow-x:auto; margin-bottom:28px; scrollbar-width:none; }
.tabs::-webkit-scrollbar{display:none}
.tab { font-family:var(--mono); font-size:13px; font-weight:600; padding:9px 16px; border-right:1px solid var(--rule); cursor:pointer; background:var(--paper); color:var(--ink2); white-space:nowrap; transition:background .1s; border-top:none; border-bottom:none; border-left:none; }
.tab:last-child { border-right:none; }
.tab:hover { background:var(--paper2); }
.tab.on { background:var(--ink); color:var(--paper); }
.g-panel { display:none; }
.g-panel.on { display:block; }
.tabla { width:100%; border:1.5px solid var(--ink); border-collapse:collapse; margin-bottom:24px; background:var(--paper); }
.tabla th { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--paper); background:var(--ink); padding:8px 10px; text-align:center; }
.tabla th:nth-child(2) { text-align:left; }
.tabla td { padding:9px 10px; border-bottom:1px solid var(--rule); font-size:13.5px; text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tabla td.tname { text-align:left; font-family:var(--display); font-weight:700; font-size:14.5px; white-space:nowrap; }
.tabla tr.clasifica td { background:rgba(20,103,47,.06); }
.tabla tr.clasifica td:first-child { box-shadow:inset 3px 0 0 var(--green); }
.tabla td.pts { font-weight:600; }
.tabla .mini-form { display:inline-flex; gap:2px; }
.msq { width:11px; height:11px; border:1px solid var(--ink2); }
.msq.V{background:var(--green);border-color:var(--green)} .msq.E{background:var(--paper3)} .msq.D{background:var(--red);border-color:var(--red)} .msq.N{border-color:var(--rule)}
.g-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:16px; }
.gcard { border:1px solid var(--ink); background:var(--paper); padding:14px 18px 12px; transition:box-shadow .12s, transform .12s; }
.gcard:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--paper3); }
.gcard-hd { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:1px; margin-bottom:10px; }
.gcard-row { display:grid; grid-template-columns:1fr 78px 1fr; align-items:center; gap:10px; margin-bottom:10px; }
.gteam { min-width:0; }
.gteam.r { text-align:right; }
.gteam .f { font-size:24px; line-height:1; }
.gteam .n { font-size:13.5px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gteam .p { font-family:var(--mono); font-size:21px; font-weight:600; margin-top:2px; }
.gteam .p.fav { color:var(--green); }
.gmid { text-align:center; }
.gmid .score { font-family:var(--mono); font-size:19px; font-weight:600; border:1.5px solid var(--ink); border-radius:40px; padding:2px 12px; display:inline-block; }
.gmid .scl { font-family:var(--mono); font-size:8px; letter-spacing:1px; color:var(--faint); margin-top:3px; text-transform:uppercase; }
.gmid .emp { font-family:var(--mono); font-size:11px; color:var(--ochre); margin-top:4px; }
.gbar { height:7px; display:flex; border:1px solid var(--ink); margin-bottom:9px; }
.gbar .h{background:var(--green)} .gbar .d{background:var(--paper3)} .gbar .a{background:var(--ink2)}
.gcard-ft { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.gpick { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:3px 9px; border:1px solid currentColor; }
.gp-h{color:var(--green)} .gp-d{color:var(--ochre)} .gp-a{color:var(--blue)}
.gextra { font-family:var(--mono); font-size:10px; color:var(--faint); display:flex; gap:10px; align-items:center; }
.gvb { color:var(--red); font-weight:600; border:1.5px solid var(--red); padding:1px 7px; transform:rotate(-3deg); }

/* ───────── LA BOLSA (favoritos) ───────── */
.bolsa { columns:2; column-gap:clamp(24px,4vw,60px); border-top:1.5px solid var(--ink); padding-top:6px; }
.cot { display:flex; align-items:baseline; padding:11px 2px; border-bottom:1px solid var(--rule); break-inside:avoid; font-size:16px; }
.cot .rk { font-family:var(--mono); font-size:12px; color:var(--faint); width:30px; }
.cot .fl { margin-right:10px; }
.cot .nm { font-weight:700; letter-spacing:-.3px; }
.cot .leader { flex:1; border-bottom:2px dotted var(--rule); margin:0 12px; transform:translateY(-4px); }
.cot .elo { font-family:var(--mono); font-size:15px; font-weight:600; }
.cot .delta { font-family:var(--mono); font-size:10px; margin-left:8px; width:46px; text-align:right; }
.up{color:var(--green)} .dn{color:var(--red)} .eq{color:var(--faint)}
.cot:nth-child(-n+3) .nm { font-size:19px; }

/* ───────── LA COCINA (metodología) ───────── */
#cocina { background:var(--paper2); border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); }
.lede { font-family:var(--serif); font-size:clamp(19px,2.2vw,24px); font-style:italic; line-height:1.5; color:var(--ink); max-width:760px; margin-bottom:36px; }
.lede::first-letter { font-size:3.2em; float:left; line-height:.8; padding:6px 10px 0 0; font-style:normal; font-family:var(--display); font-weight:800; color:var(--red); }
.recetas { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1.5px solid var(--ink); background:var(--paper); }
.receta { padding:22px 24px 20px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.receta:nth-child(3n) { border-right:none; }
.receta:nth-child(n+4) { border-bottom:none; }
.rec-w { font-family:var(--mono); font-size:26px; font-weight:600; color:var(--red); }
.rec-n { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:2px; color:var(--faint); margin:4px 0 8px; }
.rec-t { font-size:17px; font-weight:800; letter-spacing:-.4px; margin-bottom:7px; }
.rec-d { font-size:13px; color:var(--ink2); line-height:1.65; }
.veredicto { margin-top:28px; border:1.5px solid var(--ink); background:var(--paper); display:grid; grid-template-columns:repeat(4,1fr); }
.ver-cell { padding:20px; text-align:center; border-right:1px solid var(--rule); }
.ver-cell:last-child{border-right:none}
.ver-n { font-family:var(--mono); font-size:clamp(26px,3vw,38px); font-weight:600; }
.ver-l { font-size:12px; color:var(--ink2); margin-top:4px; }
.ver-s { font-family:var(--mono); font-size:9.5px; letter-spacing:1px; color:var(--faint); text-transform:uppercase; margin-top:3px; }
.compromiso { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:0; border:1.5px solid var(--ink); background:var(--paper); }
.comp-col { padding:22px 26px; border-right:1px solid var(--rule); }
.comp-col:last-child{border-right:none}
.comp-t { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:2px; margin-bottom:12px; }
.comp-b { font-size:13.5px; color:var(--ink2); line-height:2; }
.comp-b strong { color:var(--ink); }

/* ───────── EL PARTE (suscripción) ───────── */
.parte { max-width:680px; margin:0 auto; text-align:center; }
.parte-box { border:1.5px solid var(--ink); box-shadow:8px 8px 0 var(--paper3); padding:clamp(30px,5vw,52px); position:relative; background:var(--paper); }
.parte-stamp { position:absolute; top:18px; right:18px; border:2px solid var(--red); color:var(--red); font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:2px; padding:5px 9px; transform:rotate(8deg); }
.parte h2 { font-size:clamp(34px,4.5vw,52px); font-weight:800; letter-spacing:-1.8px; line-height:.98; margin-bottom:12px; }
.parte h2 i { font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-1px; color:var(--red); }
.parte p { color:var(--ink2); font-size:15.5px; margin-bottom:26px; }
.sub-row { display:flex; gap:0; max-width:460px; margin:0 auto; }
.sub-input { flex:1; border:1.5px solid var(--ink); border-right:none; background:var(--paper); padding:13px 16px; font-family:var(--mono); font-size:13px; color:var(--ink); outline:none; }
.sub-input::placeholder { color:var(--faint); }
.sub-input:focus { background:#fff; }
.sub-btn { border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1px; padding:0 22px; cursor:pointer; transition:background .12s; }
.sub-btn:hover { background:var(--red); border-color:var(--red); }
.sub-perks { display:flex; justify-content:center; gap:24px; margin-top:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--ink2); }
#sub-msg { margin-top:12px; font-family:var(--mono); font-size:12px; min-height:18px; }

/* ───────── PIE ───────── */
footer { border-top:3px double var(--ink); margin-top:clamp(40px,6vw,72px); }
.foot-in { max-width:1280px; margin:0 auto; padding:30px clamp(16px,4vw,48px) 40px; display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:start; }
.f-name { font-size:24px; font-weight:800; letter-spacing:-1px; }
.f-name .dot{color:var(--red)}
.f-date { font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:4px; letter-spacing:1px; }
.f-fine { font-size:11.5px; color:var(--ink2); line-height:1.8; max-width:560px; }
.f-fine strong { color:var(--ink); }
.f-links { display:flex; flex-direction:column; gap:8px; align-items:flex-end; font-family:var(--mono); font-size:11.5px; letter-spacing:.5px; }
.f-links a:hover { color:var(--red); }

/* ───────── SOCIOS / CENSURA / QUIOSCO ───────── */
.nav-auth { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-user { font-family:var(--mono); font-size:10.5px; color:var(--ink2); letter-spacing:.5px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-link-btn { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1px; color:var(--ink); border:1.5px solid var(--ink); padding:7px 13px; cursor:pointer; background:transparent; transition:all .12s; }
.nav-link-btn:hover { background:var(--ink); color:var(--paper); }
.badge-abonado { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1px; color:var(--green); border:1.5px solid var(--green); padding:3px 8px; transform:rotate(-2deg); }

/* censura de imprenta */
.redact { display:inline-block; background:var(--ink); height:.8em; border-radius:1px; vertical-align:baseline; opacity:.88; }
.redact-bar { height:14px; background:repeating-linear-gradient(90deg, var(--ink) 0 22px, transparent 22px 27px); opacity:.82; }
.ficha.sealed .ficha-main { position:relative; }
.sealed-note { font-family:var(--mono); font-size:10px; letter-spacing:1.5px; color:var(--red); text-transform:uppercase; }
.seal-stamp { border:2.5px solid var(--red); color:var(--red); font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2px; padding:7px 14px; transform:rotate(-7deg); display:inline-block; }
.seal-cta { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1px; background:var(--ink); color:var(--paper); border:none; padding:10px 16px; cursor:pointer; box-shadow:3px 3px 0 var(--red); transition:all .12s; }
.seal-cta:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--red); }
.gcard.sealed { background:var(--paper2); }
.gcard.sealed:hover { transform:none; box-shadow:none; }
.slip.teaser { background:var(--paper2); border-style:solid; }

/* modal carné de socio */
.veil { position:fixed; inset:0; background:rgba(24,20,16,.55); z-index:500; display:none; align-items:flex-start; justify-content:center; padding:7vh 16px; overflow-y:auto; }
.veil.on { display:flex; }
.carne { background:var(--paper); border:1.5px solid var(--ink); box-shadow:10px 10px 0 rgba(24,20,16,.35); width:100%; max-width:430px; position:relative; }
.carne-hd { background:var(--ink); color:var(--paper); padding:12px 18px; display:flex; justify-content:space-between; align-items:center; }
.carne-hd .t { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:2px; }
.carne-x { background:none; border:none; color:var(--paper); font-family:var(--mono); font-size:16px; cursor:pointer; padding:0 2px; }
.carne-tabs { display:flex; border-bottom:1.5px solid var(--ink); }
.ctab { flex:1; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:1.5px; padding:11px; background:var(--paper2); border:none; border-right:1px solid var(--rule); cursor:pointer; color:var(--ink2); }
.ctab:last-child{border-right:none}
.ctab.on { background:var(--paper); color:var(--ink); box-shadow:inset 0 -3px 0 var(--red); }
.carne-body { padding:22px; }
.field { margin-bottom:14px; }
.field label { display:block; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.5px; color:var(--ink2); text-transform:uppercase; margin-bottom:5px; }
.field input { width:100%; border:1.5px solid var(--ink); background:var(--paper); padding:11px 13px; font-family:var(--mono); font-size:13px; color:var(--ink); outline:none; }
.field input:focus { background:#fff; }
.field-row { display:flex; gap:10px; }
.field-row .field { flex:1; min-width:0; }
.carne-btn { width:100%; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:1.5px; padding:13px; cursor:pointer; box-shadow:4px 4px 0 var(--red); transition:all .12s; margin-top:4px; }
.carne-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--red); }
.carne-msg { font-family:var(--mono); font-size:11px; min-height:16px; margin-top:10px; text-align:center; }
.carne-note { font-size:12px; color:var(--ink2); margin-top:12px; line-height:1.6; text-align:center; }

/* el quiosco */
.quiosco { display:grid; grid-template-columns:1fr 1.15fr; gap:0; border:1.5px solid var(--ink); background:var(--paper); }
.tarifa { padding:30px 32px; border-right:1px solid var(--rule); display:flex; flex-direction:column; }
.tarifa:last-child { border-right:none; }
.tarifa.abono { background:var(--paper2); position:relative; box-shadow:inset 0 4px 0 var(--red); }
.tarifa-n { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:2.5px; color:var(--ink2); margin-bottom:8px; }
.tarifa-t { font-size:26px; font-weight:800; letter-spacing:-.8px; }
.tarifa-p { font-family:var(--mono); margin:14px 0 4px; }
.tarifa-p .big { font-size:42px; font-weight:600; }
.tarifa-p .per { font-size:12px; color:var(--faint); }
.tarifa-l { border-top:1px solid var(--ink); margin-top:16px; padding-top:6px; flex:1; }
.tarifa-l div { display:flex; gap:10px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--rule); font-size:13.5px; }
.tarifa-l .si { color:var(--green); font-family:var(--mono); font-weight:600; }
.tarifa-l .no { color:var(--faint); font-family:var(--mono); }
.tarifa-l .off { color:var(--faint); text-decoration:line-through; }
.tarifa .btn { justify-content:center; margin-top:20px; }
.abono-stamp { position:absolute; top:16px; right:16px; border:2px solid var(--red); color:var(--red); font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:1.5px; padding:4px 8px; transform:rotate(7deg); }

/* ───────── CARNÉ v2 + CONFIRMACIONES ───────── */
.carne { max-width:480px; overflow:hidden; }
.carne::after { content:''; display:block; height:10px; background:
  radial-gradient(circle at 6px -2px, transparent 5px, var(--paper) 5px) repeat-x;
  background-size:14px 10px; filter:drop-shadow(0 2px 0 rgba(24,20,16,.15)); }
.carne-hd .logo-mini { font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.5px; }
.carne-hd .logo-mini i { font-family:var(--serif); font-style:italic; font-weight:400; }
.carne-hd .logo-mini .dot { color:var(--red); }
.carne-perks { display:flex; justify-content:center; gap:16px; padding:9px 12px; background:var(--paper2); border-bottom:1px solid var(--rule); font-family:var(--mono); font-size:9.5px; letter-spacing:.5px; color:var(--ink2); flex-wrap:wrap; }
.carne-perks b { color:var(--green); font-weight:600; }
.carne-btn.loading { pointer-events:none; opacity:.75; }
.carne-foot { font-size:11.5px; color:var(--faint); text-align:center; margin-top:12px; }
.carne-foot a { text-decoration:underline; cursor:pointer; }
.carne-foot a:hover { color:var(--red); }

/* tarjeta de socio (confirmación) */
.socio-card { border:3px double var(--ink); margin:4px; padding:26px 22px 22px; text-align:center; position:relative; background:
  repeating-linear-gradient(0deg, transparent 0 26px, rgba(24,20,16,.025) 26px 27px), var(--paper); }
.socio-kicker { font-family:var(--mono); font-size:9px; letter-spacing:3px; color:var(--ink2); }
.socio-name { font-size:26px; font-weight:800; letter-spacing:-.8px; margin:8px 0 2px; word-break:break-word; }
.socio-no { font-family:var(--mono); font-size:12px; color:var(--ink2); letter-spacing:1.5px; }
.socio-since { font-family:var(--mono); font-size:9px; color:var(--faint); letter-spacing:1.5px; margin-top:14px; }
.slam { display:inline-block; border:3px solid var(--red); color:var(--red); font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:3px; padding:9px 18px; margin-top:16px;
  animation:slam .55s cubic-bezier(.18,1.6,.4,1) .25s backwards; transform:rotate(-8deg); }
.slam.gold { border-color:var(--ochre); color:var(--ochre); }
@keyframes slam {
  0%   { transform:scale(3) rotate(-32deg); opacity:0; }
  55%  { transform:scale(.9) rotate(-6deg); opacity:1; }
  75%  { transform:scale(1.08) rotate(-9deg); }
  100% { transform:scale(1) rotate(-8deg); }
}
.carne.shake { animation:shake .35s .5s; }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translate(2px,1px) rotate(.4deg)} 55%{transform:translate(-2px,-1px) rotate(-.4deg)} 80%{transform:translate(1px,0)} }
.conf { position:absolute; top:-14px; width:7px; height:12px; opacity:.9; animation:fall 1.6s ease-in forwards; pointer-events:none; }
@keyframes fall { to { transform:translateY(560px) rotate(540deg); opacity:.7; } }

/* ───────── EL PALCO ───────── */
#palco { display:none; }
#palco.abierto { display:block; }
.palco-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:26px; }
.palco-select { font-family:var(--mono); font-size:12.5px; padding:11px 14px; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); min-width:300px; outline:none; cursor:pointer; }
.palco-hint { font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.5px; }
.duelo { border:1.5px solid var(--ink); background:var(--paper); margin-bottom:18px; }
.duelo-hd { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--ink); }
.duelo-team { font-size:clamp(17px,2vw,23px); font-weight:800; letter-spacing:-.5px; }
.duelo-team.r { text-align:right; }
.duelo-mid { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:1px; }
.duel-row { display:grid; grid-template-columns:86px 1fr 150px 1fr 86px; align-items:center; gap:10px; padding:9px 22px; border-bottom:1px solid var(--rule); }
.duel-row:last-child { border-bottom:none; }
.duel-v { font-family:var(--mono); font-size:13px; font-weight:600; }
.duel-v.r { text-align:right; }
.duel-v .win { color:var(--green); }
.duel-k { font-family:var(--mono); font-size:9.5px; letter-spacing:1.2px; color:var(--ink2); text-transform:uppercase; text-align:center; }
.duel-bar { height:9px; background:var(--paper2); border:1px solid var(--rule); position:relative; }
.duel-bar .fill { position:absolute; top:0; bottom:0; background:var(--ink2); }
.duel-bar.l .fill { right:0; }
.duel-bar.r .fill { left:0; }
.duel-bar .fill.lead { background:var(--green); }
.onces { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.once { border:1.5px solid var(--ink); background:var(--paper); }
.once-hd { background:var(--ink); color:var(--paper); padding:9px 16px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:1.5px; }
.once-grp { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:2px; color:var(--red); padding:9px 16px 3px; }
.jug { display:flex; align-items:baseline; gap:9px; padding:6px 16px; border-bottom:1px solid var(--rule); font-size:13.5px; }
.jug:last-child{border-bottom:none}
.jug .nm { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jug .club { font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.jug .val { font-family:var(--mono); font-size:11px; color:var(--ink2); white-space:nowrap; }
.fchip { font-family:var(--mono); font-size:10px; font-weight:600; padding:1px 6px; border:1px solid currentColor; }
.f-bien { color:var(--green); } .f-meh { color:var(--ochre); } .f-mal { color:var(--red); } .f-nd { color:var(--faint); }
.bajas { padding:10px 16px 12px; border-top:1.5px dashed var(--rule); font-size:12px; color:var(--ink2); }
.bajas b { color:var(--red); font-family:var(--mono); font-size:9.5px; letter-spacing:1.5px; }
.palco-scores { display:flex; gap:10px; flex-wrap:wrap; align-items:center; border:1.5px solid var(--ink); background:var(--paper); padding:14px 20px; }
.palco-scores .t { font-family:var(--mono); font-size:9.5px; letter-spacing:2px; color:var(--ink2); margin-right:8px; }
.score-chip { border:1.5px solid var(--ink); border-radius:40px; padding:4px 14px; font-family:var(--mono); font-size:15px; font-weight:600; }
.score-chip small { color:var(--faint); font-size:10px; margin-left:6px; }
.score-chip:first-of-type { background:var(--ink); color:var(--paper); }
.score-chip:first-of-type small { color:var(--paper3); }
.palco-note { font-family:var(--mono); font-size:9.5px; color:var(--faint); margin-top:10px; letter-spacing:.5px; }
.palco-sealed { border:1.5px dashed var(--ink); padding:34px; text-align:center; background:var(--paper2); }
@media (max-width:900px){
  .onces { grid-template-columns:1fr; }
  .duel-row { grid-template-columns:60px 1fr 90px 1fr 60px; padding:9px 12px; }
}

/* ───────── EL DIRECTO ───────── */
#directo { display:none; }
#directo.con-partidos { display:block; }
.directo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; }
.dir-card { border:1.5px solid var(--ink); background:var(--paper); box-shadow:5px 5px 0 var(--paper3); }
.dir-hd { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--ink); font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.5px; }
.st-previa { color:var(--faint); } .st-descanso { color:var(--ochre); }
.st-en_juego { color:var(--red); } .st-final { color:var(--ink); }
.st-suspendido, .st-aplazado { color:var(--red); }
.live-dot { width:7px; height:7px; background:var(--red); border-radius:50%; display:inline-block; margin-right:6px; animation:blink 1.6s steps(2) infinite; vertical-align:1px; }
.dir-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:16px 16px 14px; }
.dir-team { min-width:0; text-align:center; }
.dir-team .f { font-size:30px; line-height:1; }
.dir-team .n { font-size:14.5px; font-weight:800; letter-spacing:-.4px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-marker { font-family:var(--mono); font-size:36px; font-weight:600; letter-spacing:-1px; text-align:center; min-width:96px; }
.dir-marker small { display:block; font-family:var(--mono); font-size:9px; font-weight:400; letter-spacing:1.5px; color:var(--faint); margin-top:2px; }
.dir-min { color:var(--red); }
.dir-xi { border-top:1.5px dashed var(--rule); }
.dir-xi summary { cursor:pointer; font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:1.5px; color:var(--ink2); padding:9px 14px; list-style:none; }
.dir-xi summary::before { content:"+ "; color:var(--red); }
.dir-xi[open] summary::before { content:"− "; }
.dir-xi-cols { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule); }
.dir-xi-col { padding:10px 14px; font-size:11.5px; line-height:1.75; border-right:1px solid var(--rule); }
.dir-xi-col:last-child { border-right:none; }
.dir-xi-col b { font-family:var(--mono); font-size:9px; letter-spacing:1px; color:var(--red); display:block; }
.dir-xi-col .frm { font-family:var(--mono); font-size:10px; color:var(--faint); }

/* ───────── LA PORRA DEL SOCIO ───────── */
.porra-box { border:1.5px solid var(--ink); background:var(--paper); margin-bottom:18px; display:flex; align-items:center; gap:16px; padding:13px 20px; flex-wrap:wrap; }
.porra-box .pt { font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:2px; color:var(--ink2); }
.porra-btns { display:flex; border:1.5px solid var(--ink); }
.porra-btn { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.5px; padding:9px 14px; background:var(--paper); border:none; border-right:1px solid var(--rule); cursor:pointer; color:var(--ink2); transition:background .1s; white-space:nowrap; }
.porra-btn:last-child { border-right:none; }
.porra-btn:hover { background:var(--paper2); }
.porra-btn.on { background:var(--ink); color:var(--paper); }
.porra-sello { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:1.5px; color:var(--green); border:2px solid var(--green); padding:3px 9px; transform:rotate(-3deg); animation:slam .45s cubic-bezier(.18,1.6,.4,1) backwards; }
.porra-msg { font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.5px; }
.porra-vs { font-family:var(--mono); font-size:10px; color:var(--ink2); margin-left:auto; }
.porra-vs b { color:var(--ink); }

/* mi carné (perfil) */
.perfil-stats { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 4px; justify-content:center; }
.pstat { border:1.5px solid var(--ink); padding:8px 14px; text-align:center; min-width:74px; background:var(--paper); }
.pstat .n { font-family:var(--mono); font-size:22px; font-weight:600; line-height:1; }
.pstat .l { font-family:var(--mono); font-size:8.5px; letter-spacing:1.5px; color:var(--faint); text-transform:uppercase; margin-top:4px; }
.pselect { width:100%; border:1.5px solid var(--ink); background:var(--paper); padding:11px 13px; font-family:var(--mono); font-size:13px; color:var(--ink); outline:none; cursor:pointer; }
.ledger { width:100%; border-collapse:collapse; font-size:12.5px; }
.ledger td { padding:7px 6px; border-bottom:1px solid var(--rule); }
.ledger .pk { font-family:var(--mono); font-size:10.5px; font-weight:600; white-space:nowrap; }
.ledger .st { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.5px; text-align:right; white-space:nowrap; }
.st-acierto { color:var(--green); } .st-fallo { color:var(--red); } .st-pendiente { color:var(--faint); }
.btn-peligro { width:100%; border:1.5px solid var(--rule); background:transparent; color:var(--ink2); font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:1px; padding:10px; cursor:pointer; margin-top:10px; transition:all .12s; }
.btn-peligro:hover { border-color:var(--red); color:var(--red); }

/* ───────── CAPTACIÓN ───────── */
button.nav-cta { border:none; cursor:pointer; font-family:var(--mono); }
.cta-note { font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.5px; margin-top:12px; }
.cta-note b { color:var(--green); font-weight:600; }
.cd-live { padding:30px 18px; text-align:center; border-bottom:1px solid var(--ink); }
.cd-live .t { font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-1px; line-height:1.1; }
.cd-live .s { font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--red); text-transform:uppercase; margin-top:6px; font-weight:600; }

.strip { max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.strip-in { background:var(--ink); color:var(--paper); box-shadow:6px 6px 0 var(--red); padding:20px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.strip-in .st-txt { flex:1; min-width:240px; font-size:14.5px; line-height:1.55; }
.strip-in .st-txt b { color:#f0c34e; }
.strip-form { display:flex; flex:1; min-width:260px; max-width:420px; }
.strip-form .sub-input { border-color:var(--paper); background:var(--paper); }
.strip-form .sub-btn { border-color:var(--red); background:var(--red); }
.strip-form .sub-btn:hover { background:#a82a1a; }
#strip-msg { font-family:var(--mono); font-size:11px; min-height:16px; width:100%; filter:brightness(1.9); }

.joinbar { position:fixed; left:0; right:0; bottom:0; z-index:300; background:var(--ink); color:var(--paper); display:none; align-items:center; gap:14px; padding:11px clamp(14px,3vw,28px); border-top:3px solid var(--red); box-shadow:0 -6px 20px rgba(24,20,16,.3); transform:translateY(100%); transition:transform .25s ease; }
.joinbar.on { display:flex; transform:none; }
.joinbar .jb-txt { flex:1; min-width:0; font-size:13.5px; }
.joinbar .jb-txt b { color:#f0c34e; }
.joinbar .jb-x { background:none; border:none; color:var(--paper); font-family:var(--mono); font-size:15px; cursor:pointer; padding:4px 6px; opacity:.7; }
.joinbar .jb-x:hover { opacity:1; }
@media (max-width:640px){
  .joinbar .jb-txt { display:none; }
  .joinbar { justify-content:center; }
}

/* skeleton */
.sk { background:linear-gradient(90deg,var(--paper2) 0%,var(--paper3) 50%,var(--paper2) 100%); background-size:200%; animation:sk 1.4s ease infinite; }
@keyframes sk { 0%{background-position:200%} 100%{background-position:-200%} }

@media (prefers-reduced-motion: reduce){
  .telex-track { animation:none; }
  .ficha, .slam, .conf, .carne.shake, .porra-sello { animation:none !important; }
  .bar-fill { transition:none; }
}

/* ───────── RESPONSIVE ───────── */
@media (max-width:1000px){
  .front { grid-template-columns:1fr; }
  .ficha-body { grid-template-columns:1fr; }
  .ficha-main { border-right:none; border-bottom:1px solid var(--rule); }
  .ficha-aside { flex-direction:row; justify-content:space-between; text-align:left; padding:14px 20px; }
  .recetas { grid-template-columns:1fr; }
  .receta { border-right:none !important; border-bottom:1px solid var(--rule) !important; }
  .receta:last-child { border-bottom:none !important; }
  .veredicto { grid-template-columns:1fr 1fr; }
  .ver-cell:nth-child(2){border-right:none}
  .ver-cell:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .compromiso { grid-template-columns:1fr; }
  .comp-col { border-right:none; border-bottom:1px solid var(--rule); }
  .comp-col:last-child{border-bottom:none}
  .bolsa { columns:1; }
  .g-grid { grid-template-columns:1fr; }
  .quiosco { grid-template-columns:1fr; }
  .tarifa { border-right:none; border-bottom:1px solid var(--rule); }
  .nav-user { display:none; }
  .mh-claim { display:none; }
  .foot-in { grid-template-columns:1fr; }
  .f-links { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:560px){
  .prob-line { grid-template-columns:86px 1fr 52px; }
  .tabla th:nth-child(n+8), .tabla td:nth-child(n+8){ display:none; }
  .sub-row { flex-direction:column; }
  .sub-input { border-right:1.5px solid var(--ink); }
  .sub-btn { padding:13px; }
  .teams { grid-template-columns:1fr; gap:8px; }
  .team.right { text-align:left; }
  .vs { display:none; }
}
/* ───────── TWEMOJI: banderas e iconos idénticos en todos los SO ───────── */
img.emoji { height:1em; width:1em; margin:0 .07em; vertical-align:-0.12em; display:inline-block; }