/* ============================================================
   B:OWtside — homenaje a la interfaz de Klub Outside
   Tema único deliberado: plancha marrón taupe + columna papel.
   Todo color se pinta explícito: la página nunca hereda el
   fondo del visor.
   ============================================================ */
:root{
  --plate:#9C8175;
  --plate-ghost:#AC9186;
  --plate-line:#B94A3A;
  --paper:#F1F1F1;
  --paper-2:#FFFFFF;
  --ink:#121212;
  --ink-2:#4E4744;
  --ink-3:#8A827E;
  --rule:#DCD8D5;
  --red:#E60012;
  --blue:#2A5CA8;
  --night:#14100E;
  --cream:#EFE7DF;
  --gold:#B08D3F;

  --col:660px;
  --pad:44px;
  --gut:9vw;      /* aire a la derecha de la columna */
  --band:112px;   /* franja de la marca vertical, entre el collage y la columna */

  --f-disp:"Jost",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Barlow",-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--plate);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:14px;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- plancha de fondo (fija) ---------- */
.bg{position:fixed;inset:0;z-index:0;background:var(--plate);overflow:hidden}
/* El collage llena todo el hueco a la izquierda de la columna, menos la
   franja de la marca. Las columnas se acomodan solas al ancho que haya. */
.bg__tiles{
  position:absolute;top:0;left:0;bottom:0;
  right:calc(var(--gut) + var(--col) + var(--band));
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  grid-auto-rows:186px;gap:2px;align-content:start;
  /* Sin esto, una pieza alta o ancha que no entra en la fila deja el hueco
     abierto: dense manda las siguientes a taparlo. */
  grid-auto-flow:dense;
}
.bg__tile{
  position:relative;overflow:hidden;
  background-color:#6E5A50;background-size:cover;background-position:center 22%;
  border-bottom:2px solid var(--plate-line);
  /* Monocromo calido en el tono de la plancha: el collage acompania la
     columna en vez de pelearse con ella. */
  filter:grayscale(1) sepia(.52) saturate(1.45) hue-rotate(-12deg) brightness(.88) contrast(1.04);
}
/* Velo unico sobre todo el collage: va fuera de los tiles para no comerse
   el filtro de arriba. */
.bg__tiles::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--plate);opacity:.26;
}
.bg__tile.--tall{grid-row:span 2}
.bg__tile.--wide{grid-column:span 2}
.bg__tiles.--empty{display:none}
/* Arranca pegada al borde de arriba y se repite hasta pasarse de largo:
   el recorte de .bg es el que decide donde termina. */
.bg__word{
  position:absolute;top:0;
  writing-mode:vertical-rl;
  font-family:var(--f-disp);font-weight:800;
  font-size:clamp(56px,6.4vw,92px);
  line-height:var(--band);letter-spacing:.06em;
  color:var(--plate-ghost);
  white-space:nowrap;user-select:none;
}
/* Una franja pegada a la columna y otra en el borde derecho. */
.bg__word.--a{right:calc(var(--gut) + var(--col))}
.bg__word.--b{right:8px}

/* ---------- columna de contenido ---------- */
.wrap{
  position:relative;z-index:1;
  width:var(--col);max-width:100%;
  margin-left:auto;margin-right:var(--gut);
  background:var(--paper);
  min-height:100vh;
}
.hdr{padding:26px var(--pad) 0}
.logo{font-family:var(--f-disp);font-weight:500;font-size:30px;letter-spacing:-.005em;color:var(--ink);display:inline-block}

/* hamburguesa */
.burger{position:fixed;top:32px;z-index:60;right:calc(var(--gut) + 44px);width:100px;display:flex;flex-direction:column;gap:6px}
.burger span{display:block;height:1px;background:var(--ink);width:100%}

/* ---------- menú: franja que entra desde la derecha ---------- */
.nav{position:fixed;inset:0;z-index:80;visibility:hidden;transition:visibility .5s}
.nav.is-open{visibility:visible}
/* El sitio sigue viendose atras, apenas oscurecido. */
.nav__scrim{position:absolute;inset:0;background:rgba(12,10,9,.52);opacity:0;transition:opacity .45s ease}
.nav.is-open .nav__scrim{opacity:1}
.nav__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(430px,88vw);
  background:var(--night);padding:92px 0 40px;overflow-y:auto;
  transform:translateX(100%);
  transition:transform .52s cubic-bezier(.22,.75,.25,1);
}
.nav.is-open .nav__panel{transform:translateX(0)}
.nav__list{padding-left:48px}
/* Los renglones entran escalonados detras de la franja. */
.nav__item{
  display:flex;align-items:center;gap:10px;margin:1px 0;
  opacity:0;transform:translateX(22px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.75,.25,1);
}
.nav.is-open .nav__item{opacity:1;transform:none}
.nav__new{font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.06em;color:var(--red);width:26px;flex:0 0 26px;text-align:right}
.nav__link{font-family:var(--f-disp);font-weight:700;font-size:29px;line-height:1.62;color:#fff;transition:color .2s}
.nav__link:hover{color:var(--plate-ghost)}
.nav__item.--gold .nav__link{color:var(--gold)}
.nav__close{position:absolute;top:30px;right:38px;z-index:2;width:44px;height:44px}
.nav__close::before,.nav__close::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--cream)}
.nav__close::before{transform:rotate(28deg)}
.nav__close::after{transform:rotate(-28deg)}

/* ---------- títulos ---------- */
.ptitle{position:relative;padding:56px 0 34px;text-align:center;overflow:hidden}

/* Cinta de letras huecas que cruza el titulo de lado a lado.  El texto va
   duplicado y la pista se corre exactamente media pista, asi el bucle no
   tiene costura.  La duracion se fija por JS segun el largo, para que
   palabras cortas y largas viajen a la misma velocidad. */
.ptitle__ghost,.sect__ghost{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;overflow:hidden;pointer-events:none;user-select:none;
  /* Peso liviano a proposito: en 800 los contornos interior y exterior de
     cada letra quedan tan juntos que el trazo se lee doble. */
  font-family:var(--f-disp);font-weight:500;line-height:1;letter-spacing:.03em;

  /* Las letras de Jost estan hechas de figuras superpuestas sin fusionar
     (el asta y los brazos de la E son rectangulos distintos), y calarlas
     dibuja tambien esas costuras internas. El truco: el trazo se pinta
     DEBAJO del relleno, y el relleno va en el color del papel, asi tapa
     todo lo que cae adentro de la letra y solo sobrevive el contorno de
     la silueta. Por eso el trazo va al doble: se ve la mitad de afuera. */
  color:var(--paper);
  -webkit-text-stroke:2.8px rgba(18,18,18,.16);
  paint-order:stroke fill;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.ghost__run{display:flex;width:max-content;animation:ghost-run 40s linear infinite}
.ghost__run>span{flex:0 0 auto;white-space:nowrap;padding-right:.3em}
.ghost__run.--rev{animation-direction:reverse}
@keyframes ghost-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ptitle__ghost{font-size:clamp(64px,13vw,118px)}
/* El titulo va encima de la cinta, sin caja que la corte: la cinta es lo
   bastante clara como para que el negro se lea igual. */
.ptitle h2,.sect__head h2{position:relative;display:inline-block}
.ptitle h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(34px,6.6vw,50px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.inner{padding:0 var(--pad) 70px}
.sect{position:relative;padding-top:52px}
.sect__head{position:relative;text-align:center;padding:26px 0;overflow:hidden}
.sect__ghost{font-size:clamp(50px,10vw,88px)}
.sect__head h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(28px,5.2vw,40px);letter-spacing:-.01em}

/* ---------- hero ---------- */
.hero{position:relative;margin-top:22px}
.hero img{width:100%;aspect-ratio:16/13;object-fit:cover;object-position:center 18%}
.hero__links{position:absolute;right:-26px;top:42%;display:flex;flex-direction:column;gap:14px}
/* Pastilla vertical, como las de Klub Outside: blanca, muy redondeada y
   con el texto girado. El texto va en un span propio porque writing-mode
   no llega al texto anonimo de un <button>: se veian vacias. */
.pill-v{
  display:block;
  background:var(--paper-2);color:var(--ink);
  padding:26px 12px;border-radius:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.22);
  transition:background .2s,color .2s;
}
.pill-v span{
  display:block;writing-mode:vertical-rl;
  font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.18em;
  line-height:1;white-space:nowrap;
}
.pill-v:hover{background:var(--night);color:#fff}

/* ---------- banners ---------- */
.bnr{padding:24px var(--pad) 0}
.bnr__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.bnr__track::-webkit-scrollbar{height:3px}
.bnr__track::-webkit-scrollbar-thumb{background:var(--rule)}
.bnr__item{flex:0 0 82%;scroll-snap-align:center}
.bnr__item .b{display:flex;flex-direction:column;justify-content:center;aspect-ratio:54/22;padding:0 28px;background:var(--night);color:#fff}
.bnr__item .b b{font-family:var(--f-disp);font-weight:700;font-size:20px;line-height:1.2}
.bnr__item .b span{font-size:11px;letter-spacing:.1em;color:var(--plate-ghost);margin-top:6px}
.bnr__item:nth-child(2n) .b{background:var(--plate)}
.bnr__item:nth-child(3n) .b{background:#3A2E28}

/* ---------- news ---------- */
.news{border-top:1px solid var(--rule)}
.news__row{display:block;padding:16px 4px;border-bottom:1px solid var(--rule);transition:background .2s}
.news__row:hover{background:#E8E5E2}
.news__date{font-family:var(--f-disp);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums}
.news__title{font-size:13.5px;line-height:1.6;margin-top:2px}
.news__body{font-size:13px;line-height:1.85;margin-top:8px;color:var(--ink-2);white-space:pre-wrap}

/* ---------- Q&A ---------- */
.notice{background:var(--paper-2);padding:20px 24px;font-size:13px;line-height:1.8;color:var(--blue)}
.qa{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.qa__card{background:var(--night);color:#fff;padding:20px 24px}
.qa__top{display:flex;align-items:baseline;gap:14px}
.qa__no{font-family:var(--f-disp);font-weight:700;font-size:21px}
.qa__date{font-family:var(--f-disp);font-weight:500;font-size:12px;letter-spacing:.06em;color:#BDB2AA;font-variant-numeric:tabular-nums}
.qa__q{font-size:13.5px;line-height:1.75;margin-top:8px}
.qa__a{font-size:13.5px;line-height:1.85;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);color:#E6DED8;white-space:pre-wrap}
.qa__a b{font-family:var(--f-disp);font-weight:700;color:var(--plate-ghost);display:block;margin-bottom:4px;font-size:12px;letter-spacing:.1em}
.qa__pending{margin-top:12px;font-family:var(--f-disp);font-weight:600;font-size:11px;letter-spacing:.12em;color:#7E736D}
.fineprint{margin-top:26px;font-size:11.5px;line-height:1.9;color:var(--ink-2)}
.fineprint p{padding-left:1.1em;text-indent:-1.1em}

/* formulario de pregunta */
.askbox{background:var(--paper-2);padding:22px 24px;margin-top:30px}
.askbox h4{font-family:var(--f-disp);font-weight:700;font-size:16px;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-family:var(--f-disp);font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.field input,.field textarea,.field select{border:1px solid var(--rule);background:var(--paper);padding:9px 12px;font-size:13px;line-height:1.6;border-radius:0}
.field textarea{min-height:88px;resize:vertical;font-family:var(--f-body)}
.hint{font-size:11.5px;line-height:1.7;color:var(--ink-3)}
.flash{font-size:12.5px;line-height:1.7;margin-top:10px;min-height:1.7em}
.flash.--ok{color:#1D7A3D}
.flash.--bad{color:var(--red)}

/* ---------- galería ---------- */
.tabs{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:20px}
.tabs__sep{color:var(--ink-3)}
.tab{font-family:var(--f-disp);font-weight:600;font-size:15px;padding-bottom:3px;border-bottom:1px solid transparent;color:var(--ink-3)}
.tab.is-on{color:var(--ink);border-bottom-color:var(--ink)}
.gal-note{text-align:center;font-size:12.5px;line-height:1.7;margin-bottom:22px;color:var(--ink-2)}
.gal-note a{text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.grid__cell{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#E3DFDC;cursor:zoom-in;width:100%}
.grid__cell img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.grid__cell:hover img{transform:scale(1.06)}
.grid__del{position:absolute;top:4px;right:4px;z-index:2;background:var(--red);color:#fff;font-size:11px;line-height:1;padding:4px 7px;border-radius:2px}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px}
.pager button{font-family:var(--f-disp);font-weight:600;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pager button.is-on{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.backidx{display:block;text-align:center;margin-top:30px;font-family:var(--f-disp);font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.grid.is-drop{outline:2px dashed var(--ink);outline-offset:6px}
.gal-add{margin-top:30px;text-align:center}
.gal-add__btn{
  font-family:var(--f-disp);font-weight:600;font-size:12px;letter-spacing:.1em;
  border:1px solid var(--ink);padding:11px 26px;border-radius:22px;
  transition:background .2s,color .2s;
}
.gal-add__btn:hover{background:var(--night);border-color:var(--night);color:#fff}
.gal-add__hint{font-size:11.5px;line-height:1.7;color:var(--ink-3);margin-top:9px}
.gal-add .flash{text-align:center}
.empty{text-align:center;padding:46px 0;color:var(--ink-3);font-size:13px}

/* ---------- botones ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;position:relative;
  width:min(320px,100%);margin:30px auto 0;height:52px;border-radius:26px;
  background:var(--night);color:#fff;
  font-family:var(--f-disp);font-weight:600;font-size:14px;letter-spacing:.04em;
  transition:opacity .2s;
}
.btn:hover{opacity:.82}
.btn::after{content:"";width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);position:absolute;right:24px}
.btn.--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px}
.more button,.more a{font-family:var(--f-disp);font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.more::after{content:"";width:5px;height:5px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}

/* ---------- deskside / quiz / special ---------- */
.lead{text-align:center;font-size:13.5px;line-height:1.9}
.post{border-bottom:1px solid var(--rule);padding:22px 0}
.post__date{font-family:var(--f-disp);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums}
.post__body{font-size:13.5px;line-height:1.9;margin-top:6px;white-space:pre-wrap}
.quiz{background:var(--paper-2);padding:24px}
.quiz img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 16%;margin-bottom:18px}
.quiz__q{font-size:13.5px;line-height:1.9}
.quiz__opts{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.quiz__opt{text-align:left;border:1px solid var(--rule);padding:11px 16px;font-size:13px;transition:background .18s,border-color .18s}
.quiz__opt:hover{background:var(--paper);border-color:var(--ink-3)}
.quiz__opt.is-right{border-color:var(--ink);background:var(--night);color:#fff}
.quiz__opt.is-wrong{border-color:var(--red);color:var(--red)}
.quiz__verdict{margin-top:14px;font-size:13px;line-height:1.8;min-height:1.8em}
.card-list{display:flex;flex-direction:column;gap:2px}
.card{display:flex;gap:16px;background:var(--paper-2);padding:14px;align-items:center}
.card__img{flex:0 0 108px;height:76px;object-fit:cover;background:#E3DFDC}
.card__cat{display:inline-block;font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.14em;padding:2px 8px;background:var(--night);color:#fff}
.card__cat.--goods{background:var(--gold)}
.card__date{font-family:var(--f-disp);font-weight:600;font-size:11px;color:var(--ink-3);margin-top:5px;letter-spacing:.06em}
.card__t{font-size:13px;line-height:1.5;margin-top:2px}
.wip{text-align:center;padding:20px 0 10px}
.wip__mark{font-family:var(--f-disp);font-weight:800;font-size:60px;color:var(--rule);line-height:1}
.wip p{font-size:13.5px;line-height:1.9;margin-top:14px}

/* ---------- about ---------- */
.about h3{font-family:var(--f-disp);font-weight:700;font-size:19px;margin:32px 0 8px}
.about p{font-size:13.5px;line-height:1.95;margin-bottom:10px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.plan{background:var(--paper-2);padding:20px}
.plan b{font-family:var(--f-disp);font-weight:700;font-size:17px;display:block}
.plan span{font-family:var(--f-disp);font-weight:600;font-size:12px;color:var(--ink-3);letter-spacing:.08em}
.plan ul{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.plan li{font-size:12.5px;line-height:1.6;padding-left:1em;text-indent:-1em}

/* ---------- footer ---------- */
.ftr{background:var(--night);color:#EDE7E2;padding:34px var(--pad) 42px}
.ftr__links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12.5px}
.ftr__links a:hover{opacity:.65}
.ftr__links small{font-size:9.5px}
.ftr__copy{margin-top:26px;font-family:var(--f-disp);font-size:11px;letter-spacing:.04em;color:#9A8F88;line-height:1.9}
.ftr__admin{margin-top:18px;font-family:var(--f-disp);font-size:11px;letter-spacing:.12em;color:#6C625C}
.ftr__admin:hover{color:var(--plate-ghost)}

/* ---------- visor de imagen ---------- */
.lb{position:fixed;inset:0;z-index:100;background:#0B0B0B;display:none;align-items:center;justify-content:center}
.lb.is-open{display:flex}
.lb img{max-width:min(92vw,1100px);max-height:82vh;object-fit:contain}
.lb__n{position:absolute;top:16px;left:20px;font-family:var(--f-disp);font-weight:600;font-size:12px;color:#fff;font-variant-numeric:tabular-nums}
.lb__cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12px;color:#CFC8C3}
.lb__x{position:absolute;top:12px;right:16px;width:36px;height:36px}
.lb__x::before,.lb__x::after{content:"";position:absolute;top:50%;left:8px;width:20px;height:1px;background:#fff}
.lb__x::before{transform:rotate(45deg)}
.lb__x::after{transform:rotate(-45deg)}
.lb__ar{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;color:#fff;font-size:26px;line-height:1}
.lb__ar.--p{left:6px}
.lb__ar.--n{right:6px}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:opacity .5s ease,visibility .5s}
.splash.is-gone{opacity:0;visibility:hidden}
.splash b{font-family:var(--f-disp);font-weight:500;font-size:34px}
.splash i{display:block;width:130px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.splash i::after{content:"";position:absolute;inset:0;background:var(--ink);animation:load 1.1s ease forwards}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* ---------- panel de administración ---------- */
.adm{position:fixed;inset:0;z-index:120;background:rgba(12,10,9,.72);display:none;padding:34px 16px;overflow-y:auto}
.adm.is-open{display:block}
.adm__box{max-width:720px;margin:0 auto;background:var(--paper);padding:28px}
.adm__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.adm__head h3{font-family:var(--f-disp);font-weight:700;font-size:24px}
.adm__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}
.adm__tab{font-family:var(--f-disp);font-weight:600;font-size:12px;letter-spacing:.04em;padding:6px 13px;border:1px solid var(--rule);color:var(--ink-3)}
.adm__tab.is-on{background:var(--night);border-color:var(--night);color:#fff}
.adm__pane{border-top:1px solid var(--rule);padding-top:18px}
.adm__row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule);font-size:12.5px;line-height:1.6}
.adm__row .g{flex:1;min-width:0;overflow-wrap:anywhere}
.adm__row .g b{font-family:var(--f-disp);font-size:12px;letter-spacing:.06em;color:var(--red);display:block}
.adm__x{flex:0 0 auto;font-family:var(--f-disp);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--red);border:1px solid var(--red);padding:3px 9px}
.adm__acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px;border-top:1px solid var(--rule);padding-top:18px}
.adm__btn{font-family:var(--f-disp);font-weight:600;font-size:13px;letter-spacing:.04em;padding:11px 22px;border-radius:24px;background:var(--night);color:#fff}
.adm__btn.--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.adm__btn[disabled]{opacity:.45;cursor:default}
.adm textarea.raw{width:100%;min-height:260px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:12px;line-height:1.6;border:1px solid var(--rule);padding:12px;background:var(--paper-2)}
.adm__note{font-size:12px;line-height:1.75;color:var(--ink-2)}
.adm__drop{border:1px dashed var(--ink-3);padding:18px;text-align:center;font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.adm__drop.is-over{border-color:var(--ink);background:var(--paper-2)}
.adm__sub{font-family:var(--f-disp);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--ink-3);margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.adm__addrow{background:var(--paper-2);padding:16px;margin-top:14px}
.adm__row .g input[type=text]{width:100%;border:1px solid var(--rule);background:var(--paper);padding:7px 10px;font-size:12.5px;margin-bottom:4px}
.adm__thumb{width:84px;height:58px;object-fit:cover;background:#E3DFDC;margin-bottom:6px}
/* selector de imagen */
.pick{display:flex;gap:12px;align-items:flex-start}
.pick__prev{flex:0 0 116px;height:82px;background:#E3DFDC;overflow:hidden}
.pick__prev img{width:100%;height:100%;object-fit:cover}
.pick__side{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pick__side input[type=text]{width:100%;border:1px solid var(--rule);background:var(--paper);padding:8px 11px;font-size:12.5px}
.pick__side .adm__btn{padding:8px 18px;font-size:12px}
.pick__side .flash{margin-top:0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  /* El gutter se toca en la variable, no en cada regla: si no, el collage y
     la franja se desalinean de la columna. Sin franja, el collage la ocupa. */
  :root{--gut:5vw;--band:0px}
  .bg__word.--a{display:none}
}
@media (max-width:900px){
  :root{--col:100%;--pad:22px}
  .bg__tiles{width:100%;right:auto;opacity:.5;grid-auto-rows:132px}
  .bg__word{display:none}
  .wrap{margin:0}
  .burger{right:18px;top:26px;width:52px;gap:5px}
  .hdr{padding:22px var(--pad) 0}
  .logo{font-size:25px}
  .nav__list{padding-left:26px}
  .nav__link{font-size:22px;line-height:1.66}
  .nav__close{top:22px;right:20px}
  .hero__links{right:0;top:auto;bottom:14px}
  .plans{grid-template-columns:1fr}
  .bnr__item{flex-basis:88%}
  .adm__box{padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- roster: tira de mugshots del ranking ----------
   Sin margenes negativos. La CAJA de cada ficha mide solo el paso (lo que
   se ve), y el retrato vive adentro en absoluto con el ancho completo,
   desbordando a la derecha; como cada ficha viene despues en el DOM, se
   pinta encima y tapa ese desborde. Asi el area visible coincide exacto
   con el area de hover, y al crecer la caja al ancho del retrato la fila
   se reacomoda sola: el retrato queda entero y nadie se va de cuadro.  */
.roster{
  --rw:172px;              /* ancho del retrato */
  --rh:258px;              /* alto: mugshot vertical 2:3 */
  --rov:.45;               /* cuanto queda tapado */
  --rstep:calc(var(--rw) * (1 - var(--rov)));
  position:relative;overflow:hidden;
  background:var(--night);
}
.roster__track{display:flex;width:max-content;animation:roster-run 60s linear infinite}
.roster:hover .roster__track,
.roster:focus-within .roster__track{animation-play-state:paused}
@keyframes roster-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.roster__card{
  flex:0 0 auto;
  width:var(--rstep);height:var(--rh);
  position:relative;
  transition:width .42s cubic-bezier(.22,.75,.25,1);
}
.roster__card:hover,.roster__card:focus-visible{width:var(--rw);z-index:99}

.roster__shot{
  position:absolute;top:0;left:0;
  width:var(--rw);height:100%;
  overflow:hidden;background:#2A211C;
  box-shadow:-7px 0 16px rgba(0,0,0,.5);
  transition:transform .42s cubic-bezier(.22,.75,.25,1),filter .3s ease;
  filter:grayscale(.55) contrast(1.05);
}
.roster__card:hover .roster__shot,
.roster__card:focus-visible .roster__shot{transform:translateY(-6px);filter:none}
.roster__shot img{width:100%;height:100%;object-fit:cover;object-position:center 16%}

.roster__rank{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--f-disp);font-weight:700;font-size:11px;letter-spacing:.08em;
  color:var(--cream);background:rgba(20,16,14,.82);
  padding:4px 9px;
}
.roster__name{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:20px 10px 9px;
  font-family:var(--f-disp);font-weight:600;font-size:12px;letter-spacing:.04em;
  color:#fff;text-align:center;
  background:linear-gradient(transparent,rgba(12,9,8,.9));
  opacity:0;transition:opacity .3s ease;
}
.roster__card:hover .roster__name,
.roster__card:focus-visible .roster__name{opacity:1}
/* La ultima ficha necesita lugar para su desborde. */
.roster__track::after{content:"";flex:0 0 auto;width:calc(var(--rw) - var(--rstep))}
.roster::before,.roster::after{
  content:"";position:absolute;top:0;bottom:0;width:56px;z-index:3;pointer-events:none;
}
.roster::before{left:0;background:linear-gradient(90deg,var(--night),transparent)}
.roster::after{right:0;background:linear-gradient(270deg,var(--night),transparent)}

@media (max-width:900px){.roster{--rw:136px;--rh:204px}}
@media (prefers-reduced-motion:reduce){.roster__track{animation:none}}

/* fila del roster en el panel */
.adm__rost{display:flex;align-items:center;gap:10px}
.adm__mv{
  display:flex;flex-direction:column;gap:3px;flex:0 0 auto;
}
.adm__mv button{
  font-family:var(--f-disp);font-weight:700;font-size:10px;line-height:1;
  border:1px solid var(--rule);padding:4px 7px;color:var(--ink-2);
}
.adm__mv button:hover{background:var(--night);border-color:var(--night);color:#fff}
.adm__mv button[disabled]{opacity:.3;cursor:default}
.adm__rank{
  font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--ink-3);
  flex:0 0 26px;text-align:right;font-variant-numeric:tabular-nums;
}
.adm__shot{flex:0 0 auto;width:38px;height:54px;object-fit:cover;background:#E3DFDC}

/* El roster ocupa el lugar que tenia el poster: las pastillas ahora
   flotan sobre la tira. */
.hero-band{position:relative;margin-top:22px}
.hero-band .hero__links{
  position:absolute;right:-26px;top:50%;transform:translateY(-50%);
  z-index:20;display:flex;flex-direction:column;gap:14px;
}
@media (max-width:900px){
  .hero-band .hero__links{right:4px;top:auto;bottom:10px;transform:none}
}

/* ---------- roles y reseteo de PIN en el panel ---------- */
.adm__role{
  display:inline-block;margin-left:8px;padding:1px 8px;
  font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--rule);color:var(--ink-3);
}
.adm__role.--owner{background:var(--night);border-color:var(--night);color:#fff}
.adm__role.--editor{background:var(--gold);border-color:var(--gold);color:#fff}
.adm__pinrow{display:flex;gap:6px;margin-top:8px;align-items:center}
.adm__pinrow input{width:110px;border:1px solid var(--rule);padding:5px 9px;font-size:12.5px}
.adm__mini{
  font-family:var(--f-disp);font-weight:600;font-size:10px;letter-spacing:.06em;
  border:1px solid var(--ink);padding:5px 10px;
}
.adm__mini:hover{background:var(--night);color:#fff}
/* Las pastillas ahora son botones: mismo aspecto que los enlaces. */
button.pill-v{border:0;cursor:pointer}

/* ---------- After Dark ---------- */
.nav__item.--nsfw .nav__link{color:#E0576B}
.nav__item.--nsfw .nav__link:hover{color:#F08494}

.gate{
  background:var(--paper-2);padding:40px 32px;text-align:center;
  border-top:3px solid #E0576B;
}
.gate__mark{
  font-family:var(--f-disp);font-weight:800;font-size:52px;line-height:1;
  color:#E0576B;letter-spacing:.02em;
}
.gate h3{font-family:var(--f-disp);font-weight:700;font-size:22px;margin:14px 0 10px}
.gate p{font-size:13.5px;line-height:1.9;max-width:44ch;margin:0 auto 8px}
.gate__small{font-size:12px;color:var(--ink-3)}
.gate__acts{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.gate__acts .adm__btn{min-width:220px;text-align:center}

/* borrar una pieza desde la propia grilla */
.grid__wrap{position:relative}
.grid__del{
  position:absolute;top:4px;right:4px;z-index:2;
  width:22px;height:22px;line-height:1;
  font-family:var(--f-disp);font-weight:700;font-size:12px;
  background:rgba(20,16,14,.8);color:#fff;border-radius:2px;
  opacity:0;transition:opacity .2s;
}
.grid__wrap:hover .grid__del{opacity:1}
.grid__del:hover{background:var(--red)}