/* ─────────────────────────────────────────────────────────────────────
   destronalo.es
   Tipografía  Neue Montreal (display + texto) · Geist Mono (datos)
   Sistema     blanco puro, tinta casi negra, peso 500 en todo,
               tracking cerrado, filetes de 1px. Un único color:
               el degradado oro→granate, y solo en dos sitios.
   ───────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Neue Montreal';src:url('/assets/fonts/NeueMontreal-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('/assets/fonts/NeueMontreal-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('/assets/fonts/NeueMontreal-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --ink-2:#3F3F42;
  --grey:#737378;
  --grey-2:#A6A6AB;
  --wash:#F6F6F5;
  --wash-2:#EDEDEB;
  --rule:#E7E7E4;
  --rule-2:#D6D6D2;
  --gold:#C79A3E;
  --garnet:#9E1B32;
  --live:#1B8A4B;
  --focus:#0A0A0A;

  --sans:'Neue Montreal',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --shell:1120px;
}

[data-theme="dark"]{
  --paper:#0A0A0A;
  --ink:#FAFAF8;
  --ink-2:#C9C9CC;
  --grey:#8A8A90;
  --grey-2:#5C5C62;
  --wash:#141414;
  --wash-2:#1D1D1C;
  --rule:#242423;
  --rule-2:#333331;
  --gold:#DFB45C;
  --garnet:#E2495F;
  --live:#4FCB86;
  --focus:#FAFAF8;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:16px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}
button,input,select{font:inherit; color:inherit}
img{display:block; max-width:100%}
::selection{background:var(--ink); color:var(--paper)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.shell{max-width:var(--shell); margin:0 auto; padding:0 24px}
@media(max-width:600px){ .shell{padding:0 18px} }

/* ═══ cabecera ═══════════════════════════════════════════════════ */
.top{
  position:sticky; top:0; z-index:80; background:color-mix(in srgb,var(--paper) 82%, transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.top.stuck{border-bottom-color:var(--rule)}
.top .shell{display:flex; align-items:center; height:62px; gap:26px}
.brand{display:flex; align-items:center; gap:8px; font-weight:500; font-size:16px; letter-spacing:-.03em; margin-right:auto}
.brand svg{width:15px; height:15px; flex:none}
.nav{display:flex; align-items:center; gap:22px; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--grey)}
.nav a{transition:color .18s}
.nav a:hover,.nav a.on{color:var(--ink)}
.theme{
  width:30px; height:30px; display:grid; place-items:center; border:0; background:none;
  color:var(--grey); cursor:pointer; border-radius:999px; transition:color .18s, background .18s;
}
.theme:hover{color:var(--ink); background:var(--wash)}
.theme svg{width:15px; height:15px}
@media(max-width:660px){ .nav{gap:15px; font-size:13.5px} .nav .s-hide{display:none} }

/* ═══ píldoras ═══════════════════════════════════════════════════ */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px; border-radius:999px; cursor:pointer;
  font-size:14.5px; font-weight:500; letter-spacing:-.012em; white-space:nowrap;
  border:1px solid transparent; transition:transform .2s var(--ease), background .2s, border-color .2s, opacity .2s;
}
.pill svg{width:13px; height:13px; transition:transform .26s var(--ease)}
.pill-solid{background:var(--ink); color:var(--paper)}
.pill-solid:hover{transform:translateY(-1px)}
.pill-solid:hover svg{transform:translateX(3px)}
.pill-ghost{background:transparent; color:var(--ink); border-color:var(--rule-2)}
.pill-ghost:hover{background:var(--wash); border-color:var(--rule-2); transform:translateY(-1px)}
.pill:active{transform:translateY(0)}
.pill[disabled]{opacity:.4; cursor:not-allowed; transform:none}

/* ═══ marcador de estado ═══════════════════════════════════════ */
.status{display:flex; justify-content:center; padding-top:16px}
.status a{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--grey);
  border:1px solid var(--rule); border-radius:999px; padding:5px 6px 5px 14px;
  letter-spacing:-.008em; transition:border-color .2s, background .2s; max-width:100%;
}
.status a:hover{border-color:var(--rule-2); background:var(--wash)}
.status .live{
  width:6px; height:6px; border-radius:50%; background:var(--live); flex:none; margin-right:1px;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent); animation:beat 2.6s ease-out infinite;
}
@keyframes beat{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 50%,transparent)}
  60%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.status .on{color:var(--live); font-weight:500}
.status .dot{color:var(--grey-2); margin:0 1px}
.status .go{
  display:grid; place-items:center; width:23px; height:23px; border-radius:999px; flex:none;
  background:var(--wash-2); color:var(--ink); font-size:11px; margin-left:3px;
  transition:transform .24s var(--ease);
}
.status a:hover .go{transform:translateX(2px)}
@media(max-width:620px){
  .status a{font-size:12.5px; padding-left:12px}
  .status .vis-long{display:none}
}

/* ═══ héroe ══════════════════════════════════════════════════════ */
.hero{text-align:center; padding:18px 0 2px}
.hero h1{
  margin:0 auto; max-width:15ch;
  font-weight:500; font-size:clamp(35px,5.2vw,52px); line-height:1.0;
  letter-spacing:-.032em; text-wrap:balance;
}
.hero h1 .price-wrap{position:relative; display:inline-block; padding-bottom:.1em; white-space:nowrap}
.hero h1 .price-wrap::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--garnet));
}
.hero .sub{
  margin:15px auto 0; max-width:46ch; font-size:16px; line-height:1.5;
  color:var(--grey); letter-spacing:-.012em; text-wrap:pretty;
}
.hero .cta{display:flex; justify-content:center; gap:10px; margin-top:28px; flex-wrap:wrap}

/* selector de importe: los dos botones abrazan el precio */
.stepper{
  display:inline-flex; align-items:center; gap:.2em; margin-left:.16em;
  vertical-align:baseline; white-space:nowrap;
}
.step{
  flex:none; width:.66em; height:.66em; min-width:32px; min-height:32px;
  display:grid; place-items:center; padding:0; cursor:pointer;
  border:1px solid var(--rule-2); border-radius:999px; background:var(--paper); color:var(--grey);
  font-size:.36em; font-weight:400; line-height:0; font-family:var(--sans);
  transform:translateY(-.14em);
  transition:background .16s, border-color .16s, color .16s, transform .16s var(--ease);
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.step:hover{background:var(--ink); border-color:var(--ink); color:var(--paper); transform:translateY(-.14em)}
.step:active{transform:translateY(-.14em) scale(.9)}
@media(max-width:600px){ .step{min-width:26px; min-height:26px} }

/* odómetro — cada dígito es un rodillo que gira */
.odo{
  --h:1.06em;
  display:inline-flex; align-items:flex-start; line-height:1;
  font-family:var(--mono); font-weight:500; letter-spacing:-.03em; font-size:.93em;
}
.odo .dig{
  display:block; width:.575em; height:var(--h); overflow:hidden; position:relative; flex:none;
}
.odo .reel{
  position:absolute; left:0; top:0; width:100%; display:block; will-change:transform;
  transition:transform .55s var(--ease);
}
.odo .reel span{display:block; height:var(--h); line-height:var(--h); text-align:center}
.odo .sep{display:block; height:var(--h); line-height:var(--h); flex:none}
.odo .sep.sp{width:.2em}
.odo .sep.dot{width:.3em; text-align:center}

/* ═══ formulario de puja ═════════════════════════════════════════ */
.bidwrap{max-width:660px; margin:16px auto 0}
.bidbar{
  display:flex; align-items:stretch; background:var(--paper);
  border:1px solid var(--rule-2); border-radius:14px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.bidbar:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px var(--wash-2)}
.bidbar .fld{flex:1 1 auto; display:flex; align-items:center; min-width:0}
.bidbar input[type=text]{
  border:0; outline:0; background:none; width:100%; padding:15px 16px; font-size:15px; letter-spacing:-.01em;
}
.bidbar input::placeholder{color:var(--grey-2)}
.bidbar .div{width:1px; background:var(--rule); flex:none; margin:9px 0}
.bidbar .sel{flex:0 0 210px; position:relative; display:flex}
.bidbar select{
  appearance:none; -webkit-appearance:none; border:0; outline:0; background:none;
  width:100%; padding:15px 34px 15px 16px; font-size:15px; letter-spacing:-.01em; cursor:pointer; color:var(--ink);
}
.bidbar select option{background:var(--paper); color:var(--ink)}
.bidbar .sel::after{content:"⌄"; position:absolute; right:14px; top:44%; transform:translateY(-50%); pointer-events:none; color:var(--grey); font-size:14px}
.bidbar .go{
  flex:none; margin:7px; width:44px; height:44px; border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  transition:transform .2s var(--ease), opacity .2s;
}
.bidbar .go svg{width:14px; height:14px; transition:transform .26s var(--ease)}
.bidbar .go:hover svg{transform:translateX(3px)}
.bidbar .go[disabled]{opacity:.35; cursor:not-allowed}
.bidnote{text-align:center; font-size:12.5px; color:var(--grey-2); margin-top:10px; letter-spacing:-.005em}
.bidnote b{color:var(--grey); font-weight:500}
@media(max-width:620px){
  .bidbar input[type=text]{padding:14px 14px; font-size:16px}  /* 16px evita el zoom de iOS */
  .bidbar .go{width:40px; height:40px; margin:6px}
}

/* aviso */
.flash{
  max-width:660px; margin:18px auto 0; padding:12px 16px; border-radius:12px; font-size:14px;
  background:var(--wash); border:1px solid var(--rule); color:var(--ink-2); text-align:left;
}
.flash.ok{border-color:var(--rule-2)}

/* ═══ filtros ════════════════════════════════════════════════════ */
.chips{display:flex; gap:7px; overflow-x:auto; padding:0 0 2px; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; scroll-snap-align:start; font-size:13.5px; font-weight:500; letter-spacing:-.012em;
  color:var(--grey); border:1px solid var(--rule); border-radius:999px; padding:6px 14px;
  white-space:nowrap; transition:color .18s, border-color .18s, background .18s;
}
.chip:hover{color:var(--ink); border-color:var(--rule-2)}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* ═══ paneles ════════════════════════════════════════════════════ */
.panels{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:34px 0 0}
@media(max-width:760px){ .panels{grid-template-columns:1fr} }
.panel{background:var(--wash); border-radius:16px; padding:13px 17px 11px}
.panel h3{
  margin:0 0 8px; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
}
.prow{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px; letter-spacing:-.01em}
.prow + .prow{border-top:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.prow .fav{width:17px; height:17px; border-radius:5px; flex:none; object-fit:cover; background:var(--wash-2)}
.prow .nm{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .mt{color:var(--grey); white-space:nowrap; font-size:13px}
.prow .rt{margin-left:auto; color:var(--grey); font-size:12.5px; white-space:nowrap; flex:none}
.prow.empty{color:var(--grey-2); border:0}

/* ═══ tablero ════════════════════════════════════════════════════ */
.board{list-style:none; margin:16px 0 0; padding:0}
.board > li{position:relative}

.row{
  display:grid; grid-template-columns:44px 34px 1fr auto; align-items:start; gap:15px;
  padding:12px 4px; border-top:1px solid var(--rule);
  transition:background .2s;
}
.board > li:last-child .row{border-bottom:1px solid var(--rule)}
.row:hover{background:color-mix(in srgb,var(--wash) 60%,transparent)}
.row .rk{
  font-family:var(--mono); font-size:13px; font-weight:400; color:var(--grey-2);
  letter-spacing:0; text-align:left; padding-top:5px;
}
.row .fav{width:34px; height:34px; border-radius:9px; object-fit:cover; background:var(--wash); flex:none}
.row .fav.ph{display:grid; place-items:center; font-weight:500; color:var(--grey); font-size:14px; font-family:var(--sans)}
.row .info{min-width:0}
.row .nm{
  font-weight:500; font-size:16px; letter-spacing:-.022em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:100%;
  background-image:linear-gradient(var(--ink),var(--ink)); background-size:0 1px;
  background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s var(--ease);
}
.row .nm:hover{background-size:100% 1px}
.row .ds{
  color:var(--grey); font-size:14px; line-height:1.45; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.row .mt{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:9px;
  font-size:12px; color:var(--grey-2); letter-spacing:-.005em;
}
/* pastilla de dato: lo que de verdad convence a quien está mirando si pujar */
.row .stat{
  display:inline-flex; align-items:baseline; gap:4px; flex:none;
  border:1px solid var(--rule); border-radius:999px; padding:3px 10px;
  font-size:11.5px; color:var(--grey); white-space:nowrap;
  transition:border-color .2s, background .2s;
}
.row:hover .stat{border-color:var(--rule-2)}
.row .stat b{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.row .stat i{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--live); margin-left:3px}
.row .stat.cpc{border-color:color-mix(in srgb,var(--gold) 34%,var(--rule))}
.row .stat.cpc b{color:var(--gold)}
.row .mt .when{color:var(--grey-2); margin-left:2px}
.row .money{text-align:right; white-space:nowrap; padding-top:1px; display:flex;
             flex-direction:column; align-items:flex-end}
.row .amt{font-family:var(--mono); font-size:15.5px; font-weight:500; letter-spacing:-.02em}
.row .take{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px; white-space:nowrap;
  border:1px solid var(--rule-2); border-radius:999px; padding:5px 12px;
  font-size:12.5px; font-weight:500; letter-spacing:-.012em; color:var(--ink);
  transition:background .18s, border-color .18s, color .18s, transform .18s var(--ease);
}
.row .take b{font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:-.02em; color:var(--grey)}
.row .take:hover{background:var(--ink); border-color:var(--ink); color:var(--paper); transform:translateY(-1px)}
.row .take:hover b{color:var(--paper)}
.row:hover .take{border-color:var(--ink)}

/* el trono */
.board > li.first .row{border-top:0; padding-top:15px; padding-bottom:15px}
.board > li.first{border-top:2px solid transparent; background-image:linear-gradient(90deg,var(--gold),var(--garnet)); background-size:100% 2px; background-repeat:no-repeat; background-position:0 0}
.board > li.first .rk{color:var(--gold); padding-top:3px}
.row .rk svg{width:15px; height:15px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.board > li.first .nm{font-size:19px; letter-spacing:-.03em}
.board > li.first .amt{font-size:19px}
.board > li.first .take{background:var(--ink); border-color:var(--ink); color:var(--paper); padding:6px 14px; font-size:13px}
.board > li.first .take b{color:color-mix(in srgb,var(--paper) 70%, var(--ink))}
.board > li.first .take:hover{filter:brightness(1.4)}
.board > li.first .take:hover b{color:var(--paper)}
.board > li.first .fav{width:40px; height:40px; border-radius:11px}
.board > li.first .row{grid-template-columns:46px 40px 1fr auto}

/* ── la firma: al pasar por encima, la fila se aparta y aparece tu hueco ── */
.ghost{
  height:0; overflow:hidden; opacity:0;
  transition:height .4s var(--ease), opacity .28s var(--ease);
}
li:hover > .ghost, li:focus-within > .ghost{height:58px; opacity:1}
.ghost-in{
  display:grid; grid-template-columns:46px 34px 1fr auto; align-items:center; gap:16px;
  height:58px; padding:0 4px; border-top:1px dashed var(--rule-2);
}
.ghost .rk{font-family:var(--mono); font-size:13px; color:var(--grey-2)}
.ghost .slot{
  height:34px; border:1px dashed var(--rule-2); border-radius:9px;
}
.ghost .txt{font-size:14px; color:var(--grey); letter-spacing:-.012em}
.ghost .txt b{color:var(--ink); font-weight:500}
.ghost .pr{font-family:var(--mono); font-size:14px; font-weight:500; color:var(--ink); text-align:right; white-space:nowrap}
@media(max-width:600px){ li:hover > .ghost, li:focus-within > .ghost{height:0; opacity:0} }

@media(max-width:600px){
  .row{grid-template-columns:24px 32px minmax(0,1fr) auto; gap:10px; padding:14px 2px}
  .board > li.first .row{grid-template-columns:24px 36px minmax(0,1fr) auto}
  .row .rk{font-size:11.5px; padding-top:4px}
  .row .rk svg{width:13px; height:13px}
  .row .fav{width:32px; height:32px; border-radius:8px}
  .board > li.first .fav{width:36px; height:36px}
  .row .nm{font-size:15px}
  .board > li.first .nm{font-size:16.5px}
  .row .amt{font-size:14px}
  .board > li.first .amt{font-size:16px}
  .row .ds{font-size:13.5px; -webkit-line-clamp:2; margin-top:3px}
  .row .mt{font-size:11.5px; gap:3px 9px; margin-top:5px}
  /* en móvil el botón baja a su propia línea para que la descripción respire */
  .row .money{display:contents}
  .row .amt{grid-column:4; grid-row:1; text-align:right; align-self:start}
  .row .take{grid-column:3 / -1; justify-self:start; margin-top:10px;
             font-size:12px; padding:5px 12px; gap:6px}
  .row .stat{font-size:11px; padding:2px 8px}
  .row .stat b{font-size:11.5px}
  .row .mt{gap:5px 6px; margin-top:8px}
  .row .mt .when{display:none}
  .board > li.first .take{font-size:12.5px; padding:6px 14px}
}

/* ═══ vacío ══════════════════════════════════════════════════════ */
.empty-board{text-align:center; padding:76px 24px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.empty-board svg{width:30px; height:30px; margin:0 auto; color:var(--gold)}
.empty-board h3{margin:16px 0 7px; font-size:24px; font-weight:500; letter-spacing:-.03em}
.empty-board p{margin:0 auto; max-width:38ch; color:var(--grey); font-size:15px}

/* ═══ paginación ═════════════════════════════════════════════════ */
.pager{display:flex; justify-content:center; align-items:center; gap:4px; margin:30px 0 10px; flex-wrap:wrap}
.pager a,.pager span{
  min-width:34px; height:34px; display:grid; place-items:center; border-radius:9px; padding:0 10px;
  font-family:var(--mono); font-size:13px; color:var(--grey); transition:color .18s, background .18s;
}
.pager a:hover{color:var(--ink); background:var(--wash)}
.pager .cur{background:var(--ink); color:var(--paper); font-weight:500}
.tally{text-align:center; color:var(--grey-2); font-size:12.5px; font-family:var(--mono); margin-bottom:10px}

/* ═══ bote ═══════════════════════════════════════════════════════ */
.pot{text-align:center; padding:96px 0 26px}
.pot .lbl{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey);
}
.pot .fig{
  font-family:var(--mono); font-weight:500; font-size:clamp(44px,9vw,80px);
  letter-spacing:-.05em; line-height:1.05; margin:14px 0 10px;
}
.pot .foot{color:var(--grey); font-size:14px}

/* ═══ pie ════════════════════════════════════════════════════════ */
footer{border-top:1px solid var(--rule); margin-top:34px; padding:34px 0 56px}
footer .shell{display:flex; flex-wrap:wrap; gap:14px 30px; align-items:baseline}
footer .made{font-size:13.5px; color:var(--grey); margin-right:auto}
footer .made a{color:var(--ink); font-weight:500}
footer nav{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; color:var(--grey)}
footer nav a{transition:color .18s}
footer nav a:hover{color:var(--ink)}

/* ═══ páginas de texto ═══════════════════════════════════════════ */
.doc{max-width:660px; margin:0 auto; padding:56px 0 20px}
.doc.wide{max-width:none}
.doc h1{font-size:clamp(32px,5.4vw,50px); font-weight:500; letter-spacing:-.035em; line-height:1.02; margin:0 0 14px}
.doc .lede{color:var(--grey); font-size:17.5px; line-height:1.55; margin:0 0 42px; letter-spacing:-.012em; max-width:52ch}
.doc h2{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); margin:44px 0 14px; padding-top:14px; border-top:1px solid var(--rule);
}
.doc p{margin:0 0 14px; color:var(--ink-2); line-height:1.65}
.doc ul{margin:0 0 14px; padding-left:0; list-style:none}
.doc li{position:relative; padding-left:20px; margin-bottom:10px; color:var(--ink-2); line-height:1.6}
.doc li::before{content:""; position:absolute; left:2px; top:.7em; width:5px; height:1px; background:var(--rule-2)}
.doc strong{color:var(--ink); font-weight:500}
.doc a:not(.pill){color:var(--ink); border-bottom:1px solid var(--rule-2); transition:border-color .18s}
.doc a:not(.pill):hover{border-bottom-color:var(--ink)}
/* las píldoras dentro de .doc mantienen su propio color: si no, `.doc a` las pinta
   de tinta sobre tinta y el botón desaparece */
.doc a.pill{border-bottom:0}
.doc a.pill-solid{color:var(--paper)}
.doc a.pill-solid:hover{color:var(--paper)}
.doc a.pill-ghost{color:var(--ink)}
.doc code,.kbd{font-family:var(--mono); font-size:13px; background:var(--wash); border-radius:5px; padding:2px 6px; color:var(--ink-2)}
.doc .callout{background:var(--wash); border-radius:14px; padding:18px 20px; margin:22px 0; font-size:15px; color:var(--ink-2)}
.doc table{width:100%; border-collapse:collapse; font-size:14.5px; margin:16px 0}
.doc th{text-align:left; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.09em;
        text-transform:uppercase; color:var(--grey); padding:0 14px 10px 0; border-bottom:1px solid var(--rule)}
.doc td{padding:12px 14px 12px 0; border-bottom:1px solid var(--rule); color:var(--ink-2); vertical-align:top}
.doc .center{text-align:center}
.doc .center .lede{margin-left:auto; margin-right:auto}

/* ═══ categorías ═════════════════════════════════════════════════ */
.catgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0 32px; margin-top:8px}
.catrow{
  display:flex; align-items:center; gap:12px; padding:15px 2px; border-top:1px solid var(--rule);
  font-size:15px; letter-spacing:-.015em; transition:padding-left .22s var(--ease);
}
.catrow:hover{padding-left:8px}
.catrow .t{font-weight:500}
.catrow .c{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--grey-2)}
.catrow .ar{color:var(--grey-2); font-size:12px; transition:transform .22s var(--ease)}
.catrow:hover .ar{transform:translateX(3px); color:var(--ink)}

/* ═══ estadísticas ═══════════════════════════════════════════════ */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0}
.statcell{padding:24px 24px 24px 0; border-top:1px solid var(--rule)}
.statcell .k{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.09em;
             text-transform:uppercase; color:var(--grey)}
.statcell .v{font-family:var(--mono); font-size:30px; font-weight:500; letter-spacing:-.04em; margin-top:8px}

/* ═══ entrada en escena ══════════════════════════════════════════ */
.js .rise{opacity:0; transform:translateY(14px)}
.js .rise.in{opacity:1; transform:none; transition:opacity .62s var(--ease), transform .62s var(--ease); transition-delay:var(--d,0ms)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js .rise{opacity:1; transform:none}
  li:hover > .ghost, li:focus-within > .ghost{height:0; opacity:0}
}

/* admin */
.btn{height:44px; padding:0 22px; border:0; border-radius:999px; background:var(--ink); color:var(--paper);
     font-size:14.5px; font-weight:500; cursor:pointer}
.btn:hover{opacity:.88}

/* ═══ prueba de valor ════════════════════════════════════════════ */
.proof{padding:88px 0 0; border-top:1px solid var(--rule); margin-top:56px}
.proof .lbl{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em;
            text-transform:uppercase; color:var(--grey); text-align:center; margin:0}
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:30px 0 0; text-align:center}
@media(max-width:680px){ .proof-grid{grid-template-columns:1fr; gap:28px} }
.proof-grid .v{font-family:var(--mono); font-weight:500; font-size:clamp(30px,5vw,46px);
               letter-spacing:-.045em; line-height:1.05}
.proof-grid p{margin:8px auto 0; max-width:24ch; color:var(--grey); font-size:14px; line-height:1.45}
.proof-note{max-width:56ch; margin:32px auto 0; text-align:center; color:var(--grey);
            font-size:14.5px; line-height:1.6}

/* ═══ récord de reinado ══════════════════════════════════════════ */
.record{margin-top:52px}
.record a{
  display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:14px;
  background:var(--wash); transition:background .2s;
}
.record a:hover{background:var(--wash-2)}
.record .lbl{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em;
             text-transform:uppercase; color:var(--grey); flex:none}
.record .who{font-weight:500; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.record .how{font-family:var(--mono); font-size:14px; color:var(--gold); margin-left:auto; flex:none}
.record .ar{color:var(--grey-2); font-size:13px; flex:none; transition:transform .22s var(--ease)}
.record a:hover .ar{transform:translateX(3px); color:var(--ink)}
@media(max-width:600px){ .record .lbl{display:none} }

/* ═══ días en el trono, en la fila ═══════════════════════════════ */
.row .mt .reign{color:var(--gold)}

/* ═══ salón del trono ════════════════════════════════════════════ */
.hall{list-style:none; margin:8px 0 0; padding:0}
.hall li{
  display:grid; grid-template-columns:34px 30px minmax(0,1fr) auto auto; align-items:center; gap:14px;
  padding:15px 2px; border-top:1px solid var(--rule);
}
.hall li:last-child{border-bottom:1px solid var(--rule)}
.hall .pos{font-family:var(--mono); font-size:13px; color:var(--grey-2)}
.hall .fav{width:30px; height:30px; border-radius:8px; object-fit:cover; background:var(--wash)}
.hall .fav.ph{display:grid; place-items:center; font-weight:500; color:var(--grey); font-size:13px; font-family:var(--sans)}
.hall .who{display:flex; align-items:center; gap:9px; min-width:0}
.hall .nm{font-weight:500; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hall .tag{
  flex:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:999px; padding:2px 8px;
}
.hall .meta{color:var(--grey-2); font-size:12.5px; white-space:nowrap}
.hall .days{font-family:var(--mono); font-size:14px; font-weight:500; white-space:nowrap; text-align:right}
.hall li.now .days{color:var(--gold)}
@media(max-width:620px){
  .hall li{grid-template-columns:26px 28px minmax(0,1fr) auto; gap:10px}
  .hall .meta{display:none}
  .hall .fav{width:28px; height:28px}
}
/* el salón no hereda las viñetas de .doc */
.hall li{padding-left:2px}
.hall li::before{content:none}

/* ═══ coronas ════════════════════════════════════════════════════ */
.crowns{display:inline-flex; align-items:center; gap:2px; margin-left:7px; vertical-align:baseline; color:var(--gold)}
.crowns svg{width:11px; height:11px; flex:none}
.crowns b{font-family:var(--mono); font-size:10.5px; font-weight:500; margin-left:2px}
@media(max-width:600px){ .crowns svg{width:10px; height:10px} }

/* ═══ separadores de tramo del tablero ═══════════════════════════ */
.board > li.tier{
  display:flex; align-items:center; gap:14px; padding:26px 4px 8px; border-top:1px solid var(--rule);
}
.board > li.tier::after{content:""; height:1px; background:var(--rule); flex:1}
.board > li.tier span{
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey-2); flex:none;
}
.board > li.tier + li .row{border-top:0}