@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Space+Mono:wght@400;700&display=swap');

:root{
  color-scheme:dark;
  /* Synthwave-editorial — paleta del logo webologi */
  --paper:#0b0913; --paper2:#141021; --card:#17132b; --ground:#070610;
  --ink:#f3effc; --ink2:#c3bce0; --muted:#8b84a8;
  --line:rgba(255,255,255,.12); --accent:#e94fd0; --accent-dark:#f56fe0;
  --accent2:#35d6f0; --violet:#8b5cf6;
  --grad:linear-gradient(120deg,#35d6f0 0%,#8b5cf6 50%,#e94fd0 100%);
  --glow:0 0 24px rgba(233,79,208,.35);
  --disp:'Bricolage Grotesque','Arial Narrow',sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(16px,3.5vw,48px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
h1,h2,h3,h4{margin:0}

.disp{font-family:var(--disp)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}
.accent{color:var(--accent)}

/* ---- utility bar ---- */
.util{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:8px var(--pad);background:var(--ink);color:#d8d3c4;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.util a{color:var(--paper)}
.util .util-right{display:flex;gap:22px;flex-wrap:wrap}

/* ---- masthead ---- */
.masthead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;padding:16px var(--pad) 12px}
.wordmark{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  line-height:.9;color:var(--ink)}
.masthead .wordmark{font-size:clamp(30px,4vw,44px)}
.masthead .issue{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--accent);margin-bottom:5px}
.btn{font-family:var(--disp);font-weight:700;font-size:13px;
  padding:10px 18px;border-radius:2px;display:inline-block;white-space:nowrap}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{color:var(--paper);background:#000}
.btn-accent{background:var(--accent);color:var(--paper)}
.btn-accent:hover{color:var(--paper);background:var(--accent-dark)}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line:hover{color:var(--ink);background:var(--paper2)}

/* ---- nav ---- */
.mainnav{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  padding:0 var(--pad);position:relative}
.mainnav .nav-inner{display:flex;flex-wrap:wrap;align-items:center;font-family:var(--disp)}
.mainnav a{font-weight:500;font-size:14px;color:var(--ink2);padding:12px 20px}
.mainnav a:first-child{padding-left:0}
.mainnav a:hover{color:var(--accent)}
.mainnav a.current{font-weight:700;color:var(--ink);background:var(--paper2)}
.mainnav .search{margin-left:auto;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;color:var(--muted);padding:12px 0}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);
  font-size:24px;cursor:pointer;padding:8px 0}

/* ---- ad slots ---- */
.ad{border:1px dashed rgba(22,21,15,.28);background:var(--paper2);color:var(--muted);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;border-radius:3px;padding:8px}
.ad small{opacity:.65;font-size:10px}
.ad-lb{height:90px}         /* 728×90 leaderboard */
.ad-mr{height:250px}        /* 300×250 */
.ad-hp{height:600px}        /* 300×600 */
.ad-band{margin:0 var(--pad)}

/* ---- portal (home) 3-col ---- */
.portal{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:28px;
  align-items:start;padding:22px var(--pad)}
.rail{display:flex;flex-direction:column;gap:20px;position:sticky;top:14px}
.rail-widget h3,.mini h3{font-family:var(--disp);font-weight:800;font-size:18px;
  letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;border-bottom:1.5px solid var(--ink);padding-bottom:8px;margin-bottom:6px}
.rail-widget h3 a,.mini h3 a{font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--muted);font-weight:400}

/* content page with one right rail */
.rail-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;
  align-items:start;padding:24px var(--pad)}
.rail-page .rail{padding-top:4px}

/* ---- compact lists (boards/mini) ---- */
.list-link{display:flex;justify-content:space-between;gap:12px;
  padding:10px 0;border-top:1px solid var(--line);color:var(--ink);font-size:15px;line-height:1.25}
.list-link:first-of-type{border-top:0}
.list-link:hover{color:var(--accent)}
.list-link strong{font-family:var(--disp);font-weight:700}
.list-link .tag{font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.12em;font-size:10px;color:var(--muted);white-space:nowrap}

/* ---- section helpers ---- */
.section{padding:24px var(--pad)}
.rule-top{border-top:1.5px solid var(--ink)}
.rule-bot{border-bottom:1.5px solid var(--ink)}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--accent);margin-bottom:10px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;margin-bottom:16px}
.sec-head h2{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.sec-head .mono{font-size:11px;color:var(--muted)}
.page-title{font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,4.4vw,44px);line-height:.95;letter-spacing:-.03em}
.lede{font-size:16px;line-height:1.5;color:var(--ink2);max-width:60ch;margin-top:12px}

/* ---- featured (compact, in center col) ---- */
.featured .visual{aspect-ratio:16/8;min-height:0;margin-bottom:14px}
.featured h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.6vw,32px);
  line-height:1.02;letter-spacing:-.02em}
.featured h2 a{color:var(--ink)}.featured h2 a:hover{color:var(--accent)}
.featured p{font-size:16px;line-height:1.5;color:var(--ink2);margin:12px 0 0}
.featured .meta{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.featured .meta .mono{font-size:11px;color:var(--muted)}

.visual{background:var(--ink);border-radius:3px;overflow:hidden;position:relative;min-height:200px}
.visual svg{display:block;width:100%;height:100%}
.visual .cap{position:absolute;left:14px;bottom:12px;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#8a8474}
.link-underline{font-family:var(--disp);font-weight:700;font-size:13px;
  border-bottom:2px solid var(--accent);padding-bottom:2px;color:var(--ink)}
.link-underline:hover{color:var(--accent)}

/* ---- news list (compact rows) ---- */
.newslist .item{display:grid;grid-template-columns:96px 1fr;gap:20px;
  padding:16px 0;border-top:1px solid var(--line)}
.newslist .item .when{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--muted);line-height:1.6}
.newslist .item h3{font-family:var(--disp);font-weight:700;font-size:19px;
  line-height:1.1;letter-spacing:-.01em;margin-bottom:5px}
.newslist .item h3 a{color:var(--ink)}.newslist .item h3 a:hover{color:var(--accent)}
.newslist .item p{font-size:15px;line-height:1.45;color:var(--ink2);margin:0}

/* ---- boards two-col (still used elsewhere) ---- */
.boards{display:grid;grid-template-columns:1fr 1fr}
.board{padding:24px var(--pad) 28px}
.board:first-child{border-right:1.5px solid var(--ink)}

/* ---- job listings ---- */
/* ---- offer cards (robust flex card) ---- */
.job{display:flex;align-items:flex-start;gap:16px;padding:18px;margin-bottom:12px;
  border:1.5px solid rgba(255,255,255,.1);border-radius:12px;background:var(--card);color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.job:hover{border-color:rgba(233,79,208,.4);transform:translateY(-2px);
  box-shadow:0 12px 34px -18px rgba(233,79,208,.5)}
.job:hover .apply{color:var(--accent)}
.job .logo{width:52px;height:52px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-family:var(--disp);font-weight:800;font-size:20px;
  background:var(--grad);color:#08060f}
.job .logo.alt{background:none;background-color:var(--accent2);color:#08060f}
.job>div:not(.logo):not(.right){flex:1 1 auto;min-width:0}
.job h3{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.14;
  letter-spacing:-.015em;margin:0 0 7px;color:var(--ink);text-wrap:balance}
.job .attrs{display:flex;gap:7px 15px;flex-wrap:wrap;align-items:center;font-size:15px;color:var(--ink2)}
.job .attrs a{color:var(--ink)}.job .attrs a:hover{color:var(--accent)}
.job .attrs strong{font-family:var(--disp);font-weight:700}
.job .attrs .mono{font-size:11px;color:var(--muted)}
.job .right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;
  gap:8px;white-space:nowrap}
.job .right .mono{font-size:11px;color:var(--muted)}
.job .apply{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink);transition:color .13s}

/* ---- cards grid ---- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1.5px solid var(--ink);border-radius:4px;
  padding:20px;display:flex;flex-direction:column;gap:8px;min-height:170px;
  transition:transform .12s ease}
.card:hover{transform:translateY(-3px)}
.card .mono{font-size:10px;color:var(--accent)}
.card h3{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.05;
  letter-spacing:-.015em}
.card h3 a{color:var(--ink)}
.card p{font-size:15px;line-height:1.4;color:var(--ink2);margin:0}
.card .foot{margin-top:auto;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.14em;font-size:10px;color:var(--muted)}
.card.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.dark h3{color:var(--paper)}.card.dark .mono{color:#e88a72}.card.dark p{color:#a7a293}
.card.span2{grid-column:span 2}

/* ---- sidebar widgets (noticias/rail) ---- */
aside .box{background:var(--ink);color:var(--paper);border-radius:3px;padding:20px}
aside .box .mono{font-size:11px;color:#e88a72;margin-bottom:8px}
aside h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--accent);border-bottom:1.5px solid var(--ink);
  padding-bottom:8px;margin-bottom:14px}
.rank{display:flex;gap:12px;color:var(--ink);align-items:flex-start}
.rank:hover{color:var(--accent)}
.rank .num{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--accent);line-height:1}
.rank .t{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.12}

/* article rows (noticias list) */
.article-row{display:grid;grid-template-columns:100px 1fr;gap:24px;
  padding:20px 0;border-top:1.5px solid var(--ink)}
.article-row:last-of-type{border-bottom:1.5px solid var(--ink)}
.article-row .when{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--muted);line-height:1.6}
.article-row h3{font-family:var(--disp);font-weight:700;font-size:23px;
  line-height:1.08;letter-spacing:-.015em;margin-bottom:6px}
.article-row h3 a{color:var(--ink)}.article-row h3 a:hover{color:var(--accent)}
.article-row p{font-size:16px;line-height:1.45;color:var(--ink2);margin:0}

/* prose (nosotros) */
.prose{max-width:70ch}
.prose h2{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:26px 0 10px}
.prose p{font-size:17px;line-height:1.55;color:var(--ink2);margin:0 0 16px}

/* filters/chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.chip{border:1.5px solid var(--ink);padding:7px 12px;border-radius:2px;color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* CTA band */
.band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;margin-bottom:4px}
.band p{margin:0;font-size:16px;color:var(--ink2)}

/* ---- footer ---- */
.site-foot{background:var(--ink);color:#d8d3c4;padding:40px var(--pad) 28px}
.site-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14)}
.site-foot .wordmark{font-size:38px;color:var(--paper)}
.site-foot .cols p{font-size:15px;line-height:1.5;color:#a7a293;max-width:36ch;margin:12px 0 0}
.site-foot .fcol{display:flex;flex-direction:column;gap:10px;font-family:var(--disp);
  font-size:14px;padding-top:6px}
.site-foot .fcol .mono{font-size:11px;color:#8a8474;margin-bottom:4px}
.site-foot .fcol a{color:#d8d3c4}.site-foot .fcol a:hover{color:var(--paper)}
.site-foot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:#8a8474}
.foot-slim{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  align-items:center;background:var(--ink);color:#8a8474;padding:18px var(--pad);
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.foot-slim .wordmark{font-size:20px;color:var(--paper);letter-spacing:-.02em}

/* ---- directory (empresas / centros) ---- */
.dirsearch{display:block;width:100%;box-sizing:border-box;background:var(--card);color:var(--ink);
  border:1.5px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 12px;margin-bottom:16px;
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.dirsearch::placeholder{color:var(--muted)}
.dirsearch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(233,79,208,.18)}
.dir-group{margin-bottom:20px}
.dir-group h4{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:-.01em;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1.5px solid var(--ink);padding-bottom:6px;margin-bottom:2px}
.dir-group h4 .count{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;color:var(--muted);font-weight:400}
.dir-group a{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-top:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.2}
.dir-group a:first-of-type{border-top:0}
.dir-group a:hover{color:var(--accent)}
.dir-group a .n{font-family:var(--mono);font-size:10px;color:var(--muted)}

/* ---- profile / detail (empresa / escuela) ---- */
.crumb{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  color:var(--muted);padding:14px var(--pad) 0}
.crumb a{color:var(--accent)}
.profile-head{display:flex;align-items:center;gap:18px;padding:12px var(--pad) 18px}
.profile-head .logo{width:72px;height:72px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-family:var(--disp);font-weight:800;font-size:30px;
  background:var(--ink);color:var(--paper);flex:0 0 auto}
.profile-head .logo.alt{background:var(--accent)}
.profile-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,38px);
  line-height:1;letter-spacing:-.02em}
.profile-head .sub{margin-top:6px;font-size:15px;color:var(--muted)}
.panel{border:1.5px solid var(--ink);border-radius:4px;padding:18px;background:var(--card)}
.panel h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  color:var(--accent);margin-bottom:12px}
.deflist{display:flex;flex-direction:column;gap:10px;margin:0}
.deflist .row{display:flex;flex-direction:column;gap:1px}
.deflist dt{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--muted)}
.deflist dd{margin:0;font-size:15px;color:var(--ink);word-break:break-word}
.center{border:1.5px solid var(--ink);border-radius:4px;padding:18px 20px;margin-bottom:16px;background:var(--card)}
.center .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px}
.center .top h3{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.015em}
.center .top h3 a{color:var(--ink)}.center .top h3 a:hover{color:var(--accent)}
.center .top .loc{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--muted);white-space:nowrap}
.center .courses{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.center .courses a{padding:7px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.center .courses a:hover{color:var(--accent)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tags .t{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:10px;
  border:1.5px solid var(--ink);border-radius:2px;padding:5px 10px;color:var(--ink)}

/* ---- forms ---- */
.form-note{border:1.5px solid var(--ink);border-radius:4px;background:var(--paper2);
  padding:16px 18px;margin-bottom:26px}
.form-note h4{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--accent);margin-bottom:8px}
.form-note p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--ink2)}
.form-note p:last-child{margin-bottom:0}
form fieldset{border:1.5px solid var(--ink);border-radius:4px;padding:20px 20px 6px;margin:0 0 22px}
form legend{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  color:var(--accent);padding:0 8px}
.field{margin-bottom:18px}
.field .lab{display:block;font-family:var(--disp);font-weight:700;font-size:15px;margin-bottom:3px}
.field .help{font-size:13px;line-height:1.4;color:var(--muted);margin:0 0 8px}
.req{color:var(--accent)}
.input,select.input,textarea.input{width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--ink);border-radius:2px;padding:11px 12px}
.input::placeholder{color:#9a948680}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 12px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:36px}
textarea.input{min-height:110px;resize:vertical;line-height:1.5}
.input:focus,select.input:focus,textarea.input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radios label{display:flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:2px;
  padding:9px 14px;font-size:15px;cursor:pointer}
.radios input{accent-color:var(--accent)}
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.checkgrid label,.check{display:flex;align-items:flex-start;gap:9px;font-size:15px;cursor:pointer}
.checkgrid input,.check input{accent-color:var(--accent);margin-top:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.form-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.form-actions .btn{padding:13px 26px;font-size:14px}
.form-actions .mini{font-size:13px;color:var(--muted)}
/* benefits */
.benefit{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.benefit:first-child{border-top:0}
.benefit .ic{flex:0 0 auto;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:3px;
  display:flex;align-items:center;justify-content:center;color:var(--accent)}
.benefit h3{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:3px}
.benefit p{margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}

/* ---- job filter bar ---- */
.filterbar{padding:16px var(--pad);border-bottom:1.5px solid var(--ink);
  display:flex;flex-direction:column;gap:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tab{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:600;
  font-size:14px;border:1.5px solid var(--ink);border-radius:7px;padding:9px 15px;color:var(--ink);
  cursor:pointer;background:var(--card)}
.tab:hover{color:var(--ink);background:var(--paper2)}
.tab.on{border-color:var(--accent);color:var(--accent);background:var(--card)}
.tab .n{font-family:var(--mono);font-size:11px;background:var(--paper2);border-radius:20px;
  padding:2px 8px;color:var(--muted)}
.tab.on .n{background:#f7e5e0;color:var(--accent)}
.tabs .spacer{flex:1;min-width:12px}
.selectmini{font-family:var(--disp);font-weight:600;font-size:14px;border:1.5px solid var(--ink);
  border-radius:7px;padding:9px 14px;background:var(--card);color:var(--ink)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-row .geo{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--muted)}
.legend .k{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ---- offer highlight tiers ---- */
/* niveles: borde de color en todo el marco + tinte (sin borde-tab de 4px) */
.job.tier-featured{border-color:rgba(233,79,208,.5);
  background:linear-gradient(0deg,rgba(233,79,208,.07),rgba(233,79,208,.07)),var(--card)}
.job.tier-boosted{border-color:rgba(53,214,240,.5);
  background:linear-gradient(0deg,rgba(53,214,240,.07),rgba(53,214,240,.07)),var(--card)}
.job.tier-promoted{border-color:rgba(139,92,246,.55);
  background:linear-gradient(0deg,rgba(139,92,246,.09),rgba(139,92,246,.09)),var(--card)}
.job.tier-remote{border-color:rgba(63,217,160,.42)}
.job.tier-featured:hover{box-shadow:0 12px 34px -18px rgba(233,79,208,.55)}
.job.tier-boosted:hover{border-color:rgba(53,214,240,.7);box-shadow:0 12px 34px -18px rgba(53,214,240,.5)}
.job.tier-promoted:hover{border-color:rgba(139,92,246,.75);box-shadow:0 12px 34px -18px rgba(139,92,246,.5)}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.08em;font-size:9px;font-weight:700;border-radius:3px;padding:3px 7px;
  border:1px solid transparent;white-space:nowrap}
.badge.featured{background:#d99a00;color:#fff}
.badge.boosted{background:#2f6fb0;color:#fff}
.badge.promoted{background:#6b46c1;color:#fff}
.badge.hot{background:var(--accent);color:#fff}
.badge.new{background:var(--ink);color:var(--paper)}
.badge.remote{background:#e7f2ec;color:#256b4c;border-color:#bfe0cf}
.badge.type{background:var(--paper2);color:var(--muted);border-color:var(--line)}

/* ---- services (empresa) ---- */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.services .svc{display:flex;gap:10px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.services .svc .ic{color:var(--accent);margin-top:3px;flex:0 0 auto}
.services .svc strong{font-family:var(--disp);font-weight:700}
@media(max-width:680px){.services{grid-template-columns:1fr}}

/* ---- auth (login / registro / recordatorio) ---- */
.auth-wrap{display:flex;justify-content:center;padding:44px var(--pad) 64px}
.auth-card{width:100%;max-width:440px}
.auth-card .eyebrow{margin-bottom:8px}
.auth-card h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4vw,38px);
  letter-spacing:-.025em;line-height:1;margin-bottom:8px}
.auth-card .sub{font-size:16px;line-height:1.45;color:var(--muted);margin-bottom:26px}
.btn-block{display:block;width:100%;text-align:center;padding:13px}
.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin:-6px 0 20px;font-size:14px}
.auth-alt{margin-top:22px;padding-top:18px;border-top:1.5px solid var(--line);
  font-size:15px;color:var(--ink2);text-align:center}

/* ---- responsive ---- */
@media(max-width:680px){.center .courses,.checkgrid,.row2,.row3{grid-template-columns:1fr}}
@media(max-width:1080px){
  .portal{grid-template-columns:200px minmax(0,1fr) 260px;gap:20px}
}
@media(max-width:920px){
  .portal,.rail-page{grid-template-columns:1fr}
  .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .rail>*{flex:1 1 240px}
  .ad-hp{height:250px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.span2{grid-column:span 2}
}
@media(max-width:680px){
  .cards{grid-template-columns:1fr}
  .card.span2{grid-column:span 1}
  .boards{grid-template-columns:1fr}
  .board:first-child{border-right:0;border-bottom:1.5px solid var(--ink)}
  .newslist .item,.article-row{grid-template-columns:1fr;gap:8px}
  .job{flex-wrap:wrap;gap:14px}
  .job>div:not(.logo):not(.right){flex:1 1 60%}
  .job .right{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;text-align:left;margin-top:2px}
  .job .right .mono{margin-bottom:0}
  .site-foot .cols{grid-template-columns:1fr 1fr;gap:26px}
  .mainnav .nav-inner{display:none;flex-direction:column;align-items:stretch;width:100%}
  .mainnav .nav-inner.open{display:flex}
  .mainnav a,.mainnav a:first-child{padding:12px 0;border-top:1px solid var(--line)}
  .mainnav .search{display:none}
  .burger{display:block}
}

/* =========================================================
   CRAFT — superficies del navegador, tipografía fina, foco,
   estados y un momento de movimiento. No cambia el mundo. */
html{scroll-behavior:smooth}
body{accent-color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}
::-moz-selection{background:var(--accent);color:var(--paper)}
input,textarea,select{caret-color:var(--accent)}

/* scrollbars temáticos */
*{scrollbar-width:thin;scrollbar-color:rgba(22,21,15,.32) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(22,21,15,.26);border:3px solid var(--paper);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(22,21,15,.42)}

/* foco visible coherente (y sin anillo al hacer clic con ratón) */
a:focus-visible,button:focus-visible,.chip:focus-visible,.tab:focus-visible,
.burger:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* tipografía: equilibrio de titulares, viudas y cifras alineadas */
h1,h2,h3,h4,.page-title{text-wrap:balance}
p,.lede,.hero p,.featured p,.news-card p,.article-row p,.job .attrs{text-wrap:pretty}
.mono,.job .right .mono,.tab .n,.deflist dd,.course-meta span{font-variant-numeric:tabular-nums}

/* enlaces de cuerpo: subrayado con aire */
.prose a,.deflist dd a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent);
  transition:text-decoration-color .15s}
.prose a:hover,.deflist dd a:hover{text-decoration-color:var(--accent)}

/* nav: subrayado al pasar, alineado al texto */
.mainnav a{transition:color .15s}
.mainnav a:hover{color:var(--accent);text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:7px}

/* botones: transición y pulsación */
.btn{transition:background-color .15s,color .15s,border-color .15s,transform .06s}
.btn:active{transform:translateY(1px)}
.link-underline{transition:color .15s,border-color .15s}

/* filas y tarjetas: transición suave + sombra susurro al elevar */
.job{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.card{transition:transform .14s ease,box-shadow .14s ease}
.card:hover{box-shadow:0 10px 24px -16px rgba(22,21,15,.5)}
.center{transition:border-color .14s ease}
.center:hover{border-color:var(--accent)}
.list-link,.dir-group a,.apply{transition:color .13s ease}

/* un momento con sentido: la red distribuida se dibuja al cargar (solo portada) */
@media (prefers-reduced-motion: no-preference){
  .featured .visual svg line{stroke-dasharray:420;stroke-dashoffset:420;
    animation:wl-draw .95s cubic-bezier(.16,1,.3,1) .2s forwards}
  .featured .visual svg circle{opacity:0;transform-box:fill-box;transform-origin:center;
    animation:wl-pop .5s cubic-bezier(.16,1,.3,1) .65s forwards}
  .featured .visual svg rect{opacity:0;animation:wl-fade .7s ease-out .35s forwards}
}
@keyframes wl-draw{to{stroke-dashoffset:0}}
@keyframes wl-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes wl-fade{from{opacity:0}to{opacity:1}}

/* =========================================================
   SYNTHWAVE — marca webologi (degradado cian→magenta sobre negro).
   Ajustes de rol sobre el mundo oscuro; el resto lo llevan los tokens. */

/* barras y paneles que deben permanecer en negro profundo */
.util,.site-foot,.foot-slim,.visual{background:var(--ground)}
.util{color:var(--ink2)}
.util a{color:var(--accent2)}
.util a:hover{color:var(--accent)}

/* wordmark: letras con el degradado del logo + glow */
.wordmark{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 12px rgba(233,79,208,.35))}
.masthead .issue{color:var(--accent2)}

/* CTA primario: degradado con resplandor */
.btn-accent{background:var(--grad);color:#08060f;border:0;
  box-shadow:0 6px 22px -8px rgba(233,79,208,.55)}
.btn-accent:hover{background:var(--grad);color:#08060f;filter:brightness(1.08)}
.link-underline{border-bottom-color:var(--accent)}

/* superficies de marca: dark con borde/resplandor neón (no invertidas a claro) */
aside .box,.card.dark{background:var(--card);color:var(--ink);
  border:1.5px solid rgba(233,79,208,.38);box-shadow:0 0 34px -14px rgba(233,79,208,.35)}
aside .box .mono,.card.dark .mono{color:var(--accent2)}
.card.dark h3{color:var(--ink)}.card.dark p{color:var(--ink2)}

/* logos e insignias: neón */
.job .logo{background:var(--grad);color:#08060f}
.job .logo.alt{background:none;background-color:var(--accent2);color:#08060f}
.profile-head .logo{background:var(--grad);color:#08060f}
.profile-head .logo.alt{background:none;background-color:var(--accent2);color:#08060f}

/* niveles de oferta: definidos arriba (borde completo + tinte) */
.badge.featured{background:var(--accent);color:#08060f}
.badge.boosted{background:var(--accent2);color:#08060f}
.badge.promoted{background:var(--violet);color:#08060f}
.badge.hot{background:var(--accent);color:#08060f}
.badge.remote{background:rgba(63,217,160,.16);color:#7ef0c4;border-color:rgba(63,217,160,.4)}

/* footer / partners en lavanda */
.site-foot{color:var(--ink2)}
.site-foot .cols p{color:var(--muted)}
.site-foot .fcol a{color:var(--ink2)}.site-foot .fcol a:hover{color:var(--accent)}
.site-foot .legal,.foot-slim{color:var(--muted)}

/* formularios: fondo oscuro, foco y caret neón */
.input::placeholder{color:#6f6a8c}
.ad{border-color:rgba(255,255,255,.16);background:var(--paper2);color:var(--muted)}

/* scrollbars y selección en magenta */
*{scrollbar-color:rgba(233,79,208,.42) transparent}
::-webkit-scrollbar-thumb{background:rgba(233,79,208,.34);border:3px solid var(--bg,var(--paper))}
::-webkit-scrollbar-thumb:hover{background:rgba(233,79,208,.55)}
::selection{background:var(--accent);color:#08060f}
::-moz-selection{background:var(--accent);color:#08060f}

/* restos cálidos a neón */
.tab.on .n{background:rgba(233,79,208,.18);color:var(--accent)}
.visual .cap{color:var(--muted)}
.masthead .btn-solid{box-shadow:0 0 0 1px rgba(255,255,255,.06)}

/* reglas y separadores: hairlines refinadas en vez de casi-blanco a 1.5px
   (los controles —inputs, chips, tabs, badges— siguen con borde brillante) */
.rule-top,.rule-bot,.mainnav,.filterbar,.section.rule-bot{border-color:rgba(255,255,255,.14)}
.board:first-child,.job,.article-row,.card,.center,.panel,form fieldset,
.list-link,.dir-group a,.dir-group h4,aside h4,.sec-head h2{border-color:rgba(255,255,255,.13)}
.profile-head.rule-bot{border-bottom-color:rgba(255,255,255,.14)}

/* sutil resplandor de fondo tras el hero de portada (atmósfera synthwave) */
.featured .visual{box-shadow:0 0 60px -20px rgba(53,214,240,.4),0 0 80px -30px rgba(233,79,208,.35)}

/* filtros interactivos */
[hidden]{display:none!important}
.tab,.chip{cursor:pointer;transition:color .13s ease,border-color .13s ease,background-color .13s ease}
.chip:hover{color:var(--accent);border-color:rgba(233,79,208,.55)}
.chip.on{background:rgba(233,79,208,.16);border-color:var(--accent);color:var(--accent)}
.tab.on .n{background:rgba(233,79,208,.2);color:var(--accent)}
.tab .n{transition:background-color .13s ease,color .13s ease}
.selectmini{cursor:pointer;transition:border-color .13s ease}
.selectmini:hover{border-color:rgba(233,79,208,.55)}
.no-results{padding:44px 6px;text-align:center;color:var(--muted);font-size:16px;
  border:1.5px dashed rgba(255,255,255,.12);border-radius:12px;background:var(--card)}