/* ============================================================
   Guía de Abandon Ship — piel

   El juego se anuncia como «óleo naval clásico», así que el papel es un negro
   cálido de barniz viejo, la tinta es hueso y los acentos son latón, cardenillo
   y sangre seca. Nada de esquinas blandas: aquí todo es madera y hierro.

   Regla heredada de Trebejo: la serif de titular (IM Fell English, tipo inglés
   de 1600) sólo por encima de 28px. Por debajo se empasta y no se lee. Lo
   pequeño usa siempre la sans.
   ============================================================ */

:root{
  --bg:#0C0B09;          /* negro cálido: barniz sobre lienzo */
  --panel:#16130F;
  --panel2:#1E1912;
  --ink:#EDE4D2;         /* hueso */
  --muted:#BFB49C;
  --dim:#8A806D;
  --ac:#C8973C;          /* latón */
  --verd:#4F8B7E;        /* cardenillo */
  --blood:#A03A2B;       /* sangre seca */
  --line:rgba(237,228,210,.10);
  --line2:rgba(237,228,210,.19);
  --glass:rgba(22,19,15,.82);
  --display:"IM Fell English",Georgia,serif;
  --caps:"IM Fell English SC","IM Fell English",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
  /* El ambiente: luz de farol arriba, agua negra abajo. */
  background-image:
    radial-gradient(1100px 520px at 50% -10%,rgba(200,151,60,.10),transparent 70%),
    radial-gradient(760px 420px at 12% 8%,rgba(79,139,126,.055),transparent 70%),
    radial-gradient(900px 620px at 92% 82%,rgba(160,58,43,.05),transparent 72%);
  background-attachment:fixed;
}
a{color:var(--ac);text-decoration:none}
a:hover{color:#E4B458;text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.muted{color:var(--muted)}
.grow{flex:1}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.between{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}

/* ---------- la barra de trebejo.com ---------- */
/* Copiado a pelo de guias/comun/guia.css. La cabecera de Trebejo va en grafito
   SIEMPRE, con los valores literales y no con las variables del tema: es el
   hueso del sitio y tiene que ser el mismo en todas las guías. Lo que se
   tematiza es la sala, no el marco. No lo toques aquí: tócalo en común. */
.sitio{position:sticky;top:0;z-index:70;background:rgba(10,10,12,.9);border-bottom:1px solid rgba(242,241,238,.13);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif}
.sitio .wrap{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 0}
.sitio .marca{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#F2F1EE;border:0}
.sitio .marca img{width:20px;height:20px;display:block}
.sitio .miga{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(242,241,238,.58)}
.sitio .miga a{color:rgba(242,241,238,.7);border:0}
.sitio .miga a:hover{color:#F2F1EE}
.sitio .miga .sep{opacity:.5}
.sitio .miga b{color:#F2F1EE;font-weight:600}
.sitio .marca:hover,.sitio .miga a:hover{text-decoration:none}

/* ---------- pestañas ---------- */
/* top = alto de la barra de arriba: 46 de min-height + 12 de padding. */
.pestanas{position:sticky;top:58px;z-index:55;background:var(--glass);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.pestanas .wrap{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none}
.pestanas .wrap::-webkit-scrollbar{display:none}
.pestanas button{background:none;border:0;border-bottom:2px solid transparent;padding:13px 14px;
  color:var(--dim);font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;letter-spacing:.005em}
.pestanas button:hover{color:var(--muted)}
.pestanas button.on{color:var(--ink);border-bottom-color:var(--ac)}
.pestanas .util{margin-left:auto;display:flex;gap:8px;align-items:center;padding-left:14px}
.lupa{display:flex;align-items:center;gap:7px;background:rgba(237,228,210,.05);border:1px solid var(--line);
  border-radius:2px;padding:5px 10px}
.lupa span{color:var(--dim);font-size:13px}
.lupa input{background:none;border:0;outline:none;width:170px;font-size:13px}
.lupa input::placeholder{color:var(--dim)}

/* ---------- portadas ---------- */
.hero,.subhero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:2px;margin:24px 0}
.hero{min-height:min(64vh,560px)}
.subhero{min-height:210px}
.hero>img,.subhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.05)}
.scrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(12,11,9,.97) 4%,rgba(12,11,9,.72) 42%,rgba(12,11,9,.30) 100%),
  radial-gradient(120% 80% at 50% 100%,transparent 40%,rgba(12,11,9,.7) 100%)}
.hero .in,.subhero .in{position:relative;padding:44px 40px 40px;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:inherit}
.hero .in{min-height:min(64vh,560px)}
.subhero .in{min-height:210px;padding:30px}
.eyebrow,.kicker{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ac)}
.kicker{color:var(--dim);letter-spacing:.14em}
h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,6.4vw,84px);line-height:.98;
  margin:14px 0 0;letter-spacing:-.01em}
.hero p{max-width:660px;margin:16px 0 0;font-size:16.5px;color:var(--muted);line-height:1.65}
.subhero h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.02;margin:9px 0 0}
.subhero p{margin:9px 0 0;max-width:620px;font-size:14px;color:var(--muted)}
.cifras{display:flex;flex-wrap:wrap;gap:30px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line2)}
.cifras div{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.1em;font-family:var(--mono)}
.cifras b{font-family:var(--display);font-weight:400;font-size:36px;color:var(--ink);letter-spacing:0;text-transform:none}

/* ---------- estructura ---------- */
section{margin:52px 0}
h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.08;margin:0}
h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;margin:0}
h4{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.12;margin:0}
.h5{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.012em;margin:0}
.h6{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.008em;margin:0}
.lead{color:var(--muted);font-size:14.5px;margin:7px 0 0;max-width:74ch}
.rotulo{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
.anchor{scroll-margin-top:124px}
.subnav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 0;margin:0 0 8px}
.subnav a{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  border:1px solid var(--line);border-radius:2px;padding:6px 11px;color:var(--muted)}
.subnav a:hover{border-color:var(--line2);color:var(--ink);text-decoration:none;background:rgba(237,228,210,.04)}

.panel{background:linear-gradient(168deg,rgba(237,228,210,.035),rgba(237,228,210,.006)),var(--panel);
  border:1px solid var(--line);border-radius:2px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:14px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.pad{padding:20px 22px}

.btn{display:inline-flex;align-items:center;gap:8px;background:rgba(237,228,210,.05);color:var(--ink);
  border:1px solid var(--line2);border-radius:2px;padding:9px 15px;font-size:13.5px;font-weight:500;cursor:pointer}
.btn:hover{background:rgba(237,228,210,.10)}
.btn.primary{background:var(--ac);border-color:var(--ac);color:#17120A;font-weight:600}
.btn.primary:hover{background:#DDA94A}
.btn.sm{padding:6px 11px;font-size:12.5px}
.chip{background:rgba(237,228,210,.04);border:1px solid var(--line);border-radius:2px;padding:6px 12px;
  font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--line2)}
.chip.on{background:rgba(200,151,60,.16);border-color:rgba(200,151,60,.5);color:#E9C778}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(237,228,210,.045);border:1px solid var(--line);
  border-radius:2px;padding:4px 9px;font-size:12px;color:var(--muted)}
.tag{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  border:1px solid var(--line);border-radius:2px;padding:3px 7px;color:var(--dim)}
select{background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:7px 11px;font-size:13px;
  color:var(--ink);cursor:pointer}
input[type=range]{accent-color:var(--ac)}

/* ---------- barras y medidores ---------- */
.bar{flex:1;height:5px;background:rgba(237,228,210,.09);border-radius:0;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ac)}
.meter{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.meter .n{flex:0 0 120px;font-size:13px;color:var(--muted)}
.meter .v{font-family:var(--mono);font-size:12.5px;color:var(--ink);min-width:38px;text-align:right}
.progress{height:3px;background:rgba(237,228,210,.09);margin:0 0 20px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blood),var(--ac));transition:width .25s}

/* ---------- fichas de dato ---------- */
.linea{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.linea:last-child{border-bottom:0}
.linea .n{flex:1;font-size:13.5px;min-width:0}
.tabla{border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:12px}
.tabla .cab,.tabla .fila{display:grid;gap:12px;padding:11px 15px;align-items:center}
.tabla .cab{background:rgba(237,228,210,.045);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--dim)}
.tabla .fila{border-top:1px solid var(--line);font-size:13.5px}
.tabla .fila:hover{background:rgba(237,228,210,.03)}
.tabla .fila.on{background:rgba(200,151,60,.09)}
.punto{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}

/* ---------- arma ---------- */
.arma{display:flex;flex-direction:column;gap:0;background:linear-gradient(168deg,rgba(237,228,210,.035),rgba(237,228,210,.006)),var(--panel);
  border:1px solid var(--line);border-radius:2px;padding:17px 18px}
.arma .top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.arma .en{font-family:var(--mono);font-size:11px;color:var(--dim)}
.arma .desc{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.55}
.arma .nota{font-size:12.5px;color:var(--ac);margin:9px 0 0;line-height:1.5}
.arma .pies{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.oro{font-family:var(--mono);font-size:12px;color:#E9C778}

/* ---------- logros ---------- */
.logro{display:flex;gap:13px;padding:14px 15px;background:var(--panel);border:1px solid var(--line);
  border-radius:2px;align-items:flex-start;text-align:left;width:100%;cursor:pointer}
.logro:hover{border-color:var(--line2)}
.logro.on{border-color:rgba(200,151,60,.45);background:linear-gradient(168deg,rgba(200,151,60,.12),rgba(200,151,60,.02)),var(--panel)}
.icobox{flex:0 0 auto;width:52px;height:52px;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  background:rgba(237,228,210,.04);position:relative;display:grid;place-items:center}
.icobox img{width:100%;height:100%;object-fit:cover}
.logro .cuerpo{min-width:0;flex:1}
.logro .nom{font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:-.008em;display:block}
.logro .en{font-family:var(--mono);font-size:10.5px;color:var(--dim);display:block;margin-top:2px}
.logro .que{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.logro .marca{flex:0 0 auto;width:22px;height:22px;border:1px solid var(--line2);border-radius:2px;
  display:grid;place-items:center;font-size:12px;color:transparent}
.logro.on .marca{background:var(--ac);border-color:var(--ac);color:#17120A}
.raro{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border:1px solid var(--line);border-radius:2px}
.r1{color:#9FBF8E;border-color:rgba(159,191,142,.3)}
.r2{color:#E9C778;border-color:rgba(233,199,120,.3)}
.r3{color:#D9884F;border-color:rgba(217,136,79,.32)}
.r4{color:#D2685A;border-color:rgba(210,104,90,.36)}

/* ---------- spoiler ---------- */
.tapa{position:relative;cursor:pointer;border:1px dashed rgba(237,228,210,.22);border-radius:2px;
  padding:11px 13px;background:rgba(160,58,43,.06)}
.tapa .oculto{filter:blur(5px);opacity:.5;user-select:none;transition:filter .2s,opacity .2s}
.tapa .aviso{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:#D2685A;display:block;margin-bottom:7px}
.tapa.abierta{border-style:solid;border-color:var(--line);background:rgba(237,228,210,.03);cursor:default}
.tapa.abierta .oculto{filter:none;opacity:1}

/* ---------- vídeos ---------- */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:16px}
.video{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;cursor:pointer}
.video:hover{border-color:var(--line2)}
.thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play i{width:48px;height:48px;border-radius:50%;background:rgba(12,11,9,.72);border:1px solid var(--line2);
  display:grid;place-items:center;color:var(--ink);font-style:normal;font-size:15px;padding-left:3px}
.video:hover .play i{background:var(--ac);color:#17120A;border-color:var(--ac)}
/* ---------- una foto que falta ----------
   Igual que en común: el rayado a 45 grados es el chaflán de la marca repetido.
   Dice «aquí no hay imagen» sin gritar, y a la vez que el hueco es intencionado
   y no un error. En las miniaturas de vídeo el texto se calla: no son de Steam. */
.falta{position:absolute;inset:0;z-index:0;display:grid;place-items:center;text-align:center;padding:0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:repeating-linear-gradient(45deg,rgba(237,228,210,.04) 0 9px,transparent 9px 18px)}
.icobox .falta{background:none}
.thumb .falta{font-size:0}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(6,5,4,.9);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:24px}
.modalbox{width:min(1060px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.modalbox iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.modalcab{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:16px 18px}

/* ---------- herramientas ---------- */
.paso{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.paso:last-child{border-bottom:0}
.paso .num{flex:0 0 30px;height:30px;border:1px solid var(--line2);border-radius:2px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;color:var(--ac)}
.paso p{margin:5px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
.step{width:28px;height:28px;border:1px solid var(--line2);background:rgba(237,228,210,.04);border-radius:2px;
  cursor:pointer;color:var(--ink);font-size:14px;line-height:1;display:grid;place-items:center}
.step:hover{background:rgba(237,228,210,.1)}
.q{font-family:var(--mono);font-size:13.5px;min-width:26px;text-align:center}
.vacio{border:1px dashed var(--line2);border-radius:2px;padding:22px;text-align:center;color:var(--dim);font-size:13.5px}
.perfil{display:grid;gap:9px;margin-top:14px}
.aviso{border-left:2px solid var(--blood);background:rgba(160,58,43,.08);padding:10px 13px;font-size:13px;
  color:#E7C0B6;margin-top:9px;line-height:1.5}
.bien{border-left:2px solid var(--verd);background:rgba(79,139,126,.08);padding:10px 13px;font-size:13px;
  color:#BEDBD3;margin-top:9px;line-height:1.5}

/* ---------- pie ---------- */
footer{margin-top:74px;border-top:1px solid var(--line)}
.pie{padding:34px 24px 52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.brand{font-family:var(--caps);font-size:20px;letter-spacing:.03em;color:var(--muted)}
.brand span{color:var(--ac)}
.pieno{margin:9px 0 0;font-size:12.5px;line-height:1.6;max-width:380px}
.enlaces{display:flex;flex-direction:column;gap:5px;font-size:13px}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .hero .in{padding:28px 20px 26px}
  .cifras{gap:20px}
  .cifras b{font-size:28px}
  h2,h3{font-size:28px}
  .meter .n{flex:0 0 92px}
}