/* ═══════════════════════════════════════════════════════════
   ESTILOS COMPARTIDOS — felipenieves.com

   UN SOLO COLOR: #FFB300.
   Se usa siempre como RELLENO (bloques, marcos, botones),
   nunca como color de letra sobre fondo claro, porque ahí
   no se lee. El texto siempre es oscuro o blanco.

   Dos fondos:
     .t-dark   solo la portada
     .t-light  todas las demás páginas
   ═══════════════════════════════════════════════════════════ */

:root{
  --amber:#FFB300;
  --ink:#191B20;

  --display:'Archivo', system-ui, sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --max:1060px;
}

.t-dark{
  --bg:#0B0F16;  --bg-2:#141B26;
  --text:#F3F1EC; --text-lo:#939EAF;
  --line:rgba(255,255,255,.12);
}
.t-light{
  --bg:#FDFBF5;  --bg-2:#FFFFFF;
  --text:#191B20; --text-lo:#5F6570;
  --line:#E6E1D6;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

/* ── RESALTADO ÁMBAR: el único uso del color en texto ── */
.hl{
  background:var(--amber);
  color:var(--ink);
  padding:.02em .14em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ── ETIQUETA MONOESPACIADA con marca ámbar ── */
.label{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-lo);
}
.label::before{
  content:"";width:14px;height:3px;
  background:var(--amber);flex-shrink:0;
}

/* ── BARRA SUPERIOR MÍNIMA ── */
.top{
  max-width:var(--max);margin:0 auto;
  padding:24px 26px 6px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.top-acts{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.mark{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);
  font-size:13.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--text);transition:opacity .15s;
}
.mark:hover{opacity:.6;}
.mark svg{color:var(--amber);flex-shrink:0;}

/* ── ESTRUCTURA ── */
.shell{max-width:var(--max);margin:0 auto;padding:26px 26px 64px;}
.head{margin-bottom:40px;}
.head .label{margin-bottom:16px;}
.head h1{
  font-family:var(--display);
  font-size:clamp(31px,5.4vw,48px);
  font-weight:800;line-height:1.14;
  letter-spacing:-.025em;text-transform:uppercase;
}
.head p{margin-top:16px;font-size:14.5px;color:var(--text-lo);max-width:58ch;}

/* ── BOTONES ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:11.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:13px 20px;border:1.5px solid transparent;border-radius:2px;
  cursor:pointer;white-space:nowrap;
  transition:filter .15s,background .15s,color .15s,border-color .15s;
}
.btn-fill{background:var(--amber);color:var(--ink);}
.btn-fill:hover{filter:brightness(1.08);}
.btn-line{border-color:var(--line);color:var(--text);}
.btn-line:hover{border-color:var(--amber);background:var(--amber);color:var(--ink);}

/* ── ETIQUETA DE ESTADO ── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);
  font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;
  background:var(--amber);color:var(--ink);
}
.badge-wip{background:transparent;border:1px solid var(--amber);color:var(--text-lo);}
.badge-wip::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);
}

/* ── TRAMA DIAGONAL: solo para huecos de imagen ── */
.stripes{
  background-color:var(--bg-2);
  background-image:repeating-linear-gradient(
    -45deg, var(--line) 0 1px, transparent 1px 10px
  );
}

/* ── PIE ── */
.foot{border-top:1px solid var(--line);padding:26px;text-align:center;}
.foot p{
  font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-lo);
}

@media(max-width:640px){
  .top{padding:18px 18px 4px;}
  .mark{font-size:12px;}
  .shell{padding:20px 18px 48px;}
  .head{margin-bottom:30px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}