/* Mr Cooler — Careers. Brand-matched to the main site (tokens.css / mr-cooler.css). */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('./inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('./inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('./inter-700.woff2') format('woff2'); }

:root {
  --navy:#1a2332;
  --accent:#2d9cdb; --accent-hover:#2487c2;
  --accent-text:#1b6a9c; --accent-strong:#1b6a9c; --accent-strong-hover:#14567d;
  --accent-soft:rgba(45,156,219,.08);
  --bg:#ffffff; --bg-alt:#f1f5f9;
  --text:#1a2332; --text-2:#4a5568; --text-muted:#5a6578;
  --whatsapp:#0e7a34; --whatsapp-hover:#0a6b2e;
  --border:rgba(26,35,50,.08);
  --shadow-sm:0 1px 3px rgba(26,35,50,.06);
  --shadow-md:0 4px 12px rgba(26,35,50,.08);
  --shadow-lg:0 16px 48px rgba(26,35,50,.18);
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-full:999px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --container:820px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; font-family:var(--font); color:var(--navy); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.container { width:min(100% - 32px, var(--container)); margin:0 auto; }

/* ---- header ---- */
.hd { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.hd__inner { width:min(100% - 32px, 1100px); margin:0 auto; display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; }
.hd__logo { display:flex; flex-direction:column; line-height:1.1; color:var(--navy); }
.hd__brand { font-size:1.125rem; font-weight:800; letter-spacing:-.01em; }
.hd__brand span { color:var(--accent); }
.hd__desc { font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-top:2px; }
.hd__nav { display:flex; align-items:center; gap:2px; margin-left:auto; }
.hd__nav a { padding:9px 13px; border-radius:var(--radius-full); color:var(--text-2); font-size:.875rem; font-weight:700; transition:color .15s, background .15s; white-space:nowrap; }
.hd__nav a:hover { background:var(--accent-soft); color:var(--accent-text); }
.hd__actions { display:flex; align-items:center; gap:16px; }
.hd__lang { display:flex; align-items:center; gap:6px; font-size:.875rem; font-weight:600; }
.hd__lang a { color:var(--text-muted); padding:4px 2px; transition:color .15s; }
.hd__lang a:hover { color:var(--accent-text); }
.hd__lang a.active { color:var(--accent-text); pointer-events:none; }
.hd__lang .sep { color:var(--border); }
.hd__wa { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; background:var(--whatsapp); color:#fff; font-weight:700; font-size:.875rem; border-radius:var(--radius-full); transition:background .15s, transform .15s; }
.hd__wa:hover { background:var(--whatsapp-hover); transform:translateY(-1px); }

/* ---- hero ---- */
.hero { padding:72px 0 56px; text-align:center; background:radial-gradient(circle at top, rgba(45,156,219,.09), transparent 36rem), var(--bg); }
.eyebrow { font-size:.875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); margin:0 0 14px; }
.hero h1 { margin:0; font-size:clamp(2.1rem,5vw,3.4rem); font-weight:700; line-height:1.05; letter-spacing:-.03em; }
.hero__sub { margin:16px auto 0; font-size:1.125rem; color:var(--text-2); line-height:1.5; max-width:54ch; }
.hero__sub b { color:var(--navy); }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.chip { display:inline-flex; align-items:center; padding:8px 16px; border-radius:var(--radius-full); background:var(--accent-soft); color:var(--accent-text); font-size:.875rem; font-weight:600; }
.hero__cta { margin-top:30px; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:0 30px; border:none; border-radius:var(--radius-full); background:var(--accent-strong); color:#fff; font-family:var(--font); font-size:1.0625rem; font-weight:700; cursor:pointer; transition:background .18s, transform .18s; }
.btn-primary:hover { background:var(--accent-strong-hover); transform:translateY(-1px); }

/* ---- sections ---- */
.section { padding:56px 0; }
.section--alt { background:var(--bg-alt); }
.section__head { text-align:center; margin-bottom:34px; }
.section__head h2 { margin:0; font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; letter-spacing:-.02em; }
.section__head p { margin:10px auto 0; color:var(--text-2); max-width:50ch; }
.job-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 22px; margin-top:14px; color:var(--text-muted); font-size:.92rem; font-weight:500; }
.job-meta__item { white-space:nowrap; }

/* ---- benefits ---- */
.benefits { display:grid; gap:18px; max-width:640px; margin:0 auto; }
@media (min-width:680px){ .benefits { grid-template-columns:1fr 1fr; gap:22px 32px; } }
.benefit { position:relative; padding-left:34px; }
.benefit::before { content:""; position:absolute; left:4px; top:.5em; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.benefit b { display:block; font-weight:700; }
.benefit small { display:block; color:var(--text-muted); font-size:.9rem; margin-top:2px; }

/* ---- job cards ---- */
.jobs { display:grid; gap:16px; }
@media (min-width:760px){ .jobs { grid-template-columns:1fr 1fr; } }
.job { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; background:var(--bg); box-shadow:var(--shadow-sm); transition:box-shadow .18s, transform .18s, border-color .18s; }
.job:hover { border-color:rgba(45,156,219,.28); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.job-head { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.job h3 { font-size:1.2rem; margin:0; font-weight:700; letter-spacing:-.01em; }
.badges { display:flex; gap:6px; flex-wrap:nowrap; }
.badge { font-size:.72rem; font-weight:600; color:var(--text-2); background:var(--bg-alt); border:1px solid var(--border); padding:3px 9px; border-radius:var(--radius-full); white-space:nowrap; }
.salary { margin:14px 0 0; font-weight:700; font-size:1.05rem; color:var(--navy); }
.salary span { color:var(--text-muted); font-weight:500; font-size:.9rem; }
.desc { margin:10px 0 0; color:var(--text-2); font-size:.96rem; }
.req { margin:14px 0 24px; padding:0; list-style:none; display:grid; gap:8px; }
.req li { position:relative; padding-left:24px; color:var(--text-2); font-size:.93rem; }
.req li::before { content:""; position:absolute; left:3px; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.job .apply-btn { margin-top:auto; align-self:flex-start; }
.apply-btn { display:inline-flex; align-items:center; gap:7px; min-height:46px; padding:0 22px; border:none; border-radius:var(--radius-full); background:var(--accent-strong); color:#fff; font-family:var(--font); font-size:.95rem; font-weight:700; cursor:pointer; transition:background .18s, transform .18s; }
.apply-btn:hover { background:var(--accent-strong-hover); transform:translateY(-1px); }

/* ---- footer ---- */
.ft { padding:40px 0 56px; color:var(--text-muted); font-size:.875rem; text-align:center; }
.ft .legal { margin:0 0 6px; font-weight:600; color:var(--text-2); }
.ft a { color:var(--whatsapp); font-weight:600; }

@media (max-width:860px){
  .hd__inner { flex-wrap:wrap; row-gap:6px; padding:8px 0; min-height:auto; }
  .hd__nav { order:3; width:100%; margin-left:0; overflow-x:auto; justify-content:flex-start; }
  .hd__actions { margin-left:auto; }
}
@media (max-width:560px){
  .hero { padding:52px 0 44px; }
  .section { padding:44px 0; }
}