/* Kompli — tokens. Copia este fichero tal cual; no renombres las variables. */
:root{
  --paper:#FBFAF7;
  --ink:#0F0F0F;
  --body:#575857;
  --mute:#9F9F9F;
  --rule:#E3E1DC;
  --field:#F0EEE9;
  --hover:#F3F1EC;

  --primary:#0B57A4;
  --primary-hover:#094A8C;
  --primary-wash:#E2EAF4;

  --amber:#B07200;
  --amber-on-ink:#E9A93A;

  --font-display:'BauhausScal', sans-serif;
  --font-editorial:'BauhausEdde', serif;
  --font-body:'Helvetica Neue', Arial, system-ui, sans-serif;

  --page:1180px;
  --gutter:56px;
  --gutter-mobile:20px;
  --tap:48px;
}

@font-face { font-family:'BauhausScal'; src:url('/fonts/BauhausScalDisplay-Regular.otf') format('opentype'); font-weight:400; font-display:block; }
@font-face { font-family:'BauhausEdde'; src:url('/fonts/BauhausEddeDisplay-Light.otf') format('opentype'); font-weight:300; font-display:block; }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; }
h1,h2,h3{ font-family:var(--font-display); font-weight:400; margin:0; letter-spacing:-0.01em; }
p{ color:var(--body); text-wrap:pretty; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--primary); }
button,input,select,textarea{ font-family:var(--font-body); border-radius:0; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

.wrap{ max-width:var(--page); margin:0 auto; padding:0 var(--gutter); }
.band{ margin:0 calc(var(--gutter) * -1); padding:64px var(--gutter); background:var(--ink); color:var(--paper); }

.btn{ background:var(--primary); color:var(--paper); border:none; padding:16px 26px; font-size:16px; font-weight:600; min-height:var(--tap); cursor:pointer; }
.btn:hover{ background:var(--primary-hover); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.link-action{ border-bottom:2px solid var(--primary); padding-bottom:3px; }

.chip{ background:var(--primary-wash); color:var(--primary); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; padding:6px 10px; display:inline-block; }
.tag{ border:1px solid var(--rule); color:var(--body); font-size:13px; padding:4px 8px; }

.field{ border:1px solid var(--ink); background:var(--paper); padding:14px 16px; font-size:16px; min-height:var(--tap); width:100%; }
.field--optional{ border-color:var(--rule); }
.field::placeholder{ color:var(--mute); }
.label{ display:block; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); margin-bottom:7px; }

.row{ display:grid; grid-template-columns:52px 1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--rule); }
.row:hover{ background:var(--hover); }
.tile{ width:52px; height:52px; border:1px solid var(--ink); background:var(--field); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:22px; }
.row__title{ font-family:var(--font-display); font-size:20px; line-height:1.2; }
.row__meta{ font-size:15px; color:var(--body); margin-top:3px; }
.row__pay{ font-family:var(--font-display); font-size:19px; text-align:right; }
.row__date{ font-size:13px; color:var(--mute); text-align:right; margin-top:5px; }
.flag-new{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); }
.band .flag-new{ color:var(--amber-on-ink); }

.board{ display:grid; grid-template-columns:224px 1fr; gap:48px; align-items:start; }

@media (max-width:1024px){ .board{ grid-template-columns:200px 1fr; gap:32px; } }
@media (max-width:768px){
  :root{ --gutter:var(--gutter-mobile); }
  .board{ grid-template-columns:1fr; gap:0; }
  .board__facets{ display:none; }            /* pasan a hoja de filtros propia */
  .band{ padding:34px var(--gutter-mobile); }
  .row{ grid-template-columns:1fr; gap:0; }  /* sin tile en móvil */
  .row__title{ font-size:24px; }
  .row__meta{ font-size:17px; }
  .row__pay,.row__date{ text-align:left; }
  h1{ font-size:40px; line-height:1.08; }
}