/* ==========================================================================
   Jobsite Labs — sitio corporativo estatico.

   Reproduccion de la maqueta aprobada: design/site-reference.html.
   El CSS de abajo es COPIA LITERAL de su bloque <style>; se extrajo con un
   script en vez de transcribirse, para no meter erratas.

   Vive en un fichero aparte para no depender de estilos en linea. El sitio no
   hace ni una sola peticion fuera del propio dominio: ni fuentes, ni scripts,
   ni imagenes externas. Los unicos enlaces a otro host son los que llevan a
   app.jobsite-labs.com, que son navegacion, no recursos.
   ========================================================================== */

:root{
  --bg:#0E1620;
  --panel:#16202C;
  --panel-2:#1B2734;
  --line:#223040;
  --line-soft:#1F2C39;
  --ink:#EAF0F6;
  --dim:#7D8FA3;
  --green:#3BC183;
  --amber:#E09A3C;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{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:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 14px;
}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(14,22,32,.88);backdrop-filter:blur(8px);z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{display:block}
.logo-text{font-weight:600;letter-spacing:-.01em;font-size:15px}
nav{display:flex;align-items:center;gap:26px;font-size:14px}
nav a{color:var(--dim);text-decoration:none}
nav a:hover{color:var(--ink)}
nav a.cta{
  color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:7px 14px;font-size:13px;
}
nav a.cta:hover{border-color:#31404E;background:var(--panel)}

/* ---------- hero ---------- */
.hero{padding:96px 0 72px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
h1{
  font-size:52px;line-height:1.06;letter-spacing:-.03em;font-weight:650;
  margin:0 0 22px;
}
h1 .lead{display:block}
h1 .tail{display:block;color:var(--dim)}
.hero p.sub{font-size:17px;color:var(--dim);margin:0 0 30px;max-width:44ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-size:14px;border-radius:6px;
  padding:11px 18px;border:1px solid transparent;
}
.btn-primary{background:var(--ink);color:#0E1620;font-weight:560}
.btn-primary:hover{background:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:#31404E;background:var(--panel)}

/* ---------- instrument panel ---------- */
.instrument{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:24px 24px 22px;
}
.inst-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.inst-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(59,193,131,.16)}
.reading{display:flex;align-items:baseline;gap:10px}
.reading .value{font-family:var(--mono);font-size:56px;line-height:1;letter-spacing:-.02em;font-weight:500}
.reading .unit{font-family:var(--mono);font-size:13px;color:var(--dim)}
.gauge-wrap{margin-top:22px}
.ticks-row{position:relative;height:14px;margin-top:5px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.ticks-row span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ticks-row span:first-child{transform:none}
.ticks-row span:last-child{transform:translateX(-100%)}
.ticks-row span:nth-child(3){color:var(--green)}
.needle{animation:settle 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes settle{from{transform:translateX(104px)}to{transform:none}}
.inst-foot{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;color:var(--dim);
}

/* ---------- thesis ---------- */
.thesis{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;background:#111B26}
.thesis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.thesis h3{margin:0 0 8px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.thesis p{margin:0;color:var(--dim);font-size:14.5px}
.thesis .num{font-family:var(--mono);font-size:11px;color:var(--green);letter-spacing:.1em;display:block;margin-bottom:12px}

/* ---------- products ---------- */
.products{padding:80px 0}
.sec-head{margin-bottom:36px}
.sec-head h2{margin:0;font-size:30px;letter-spacing:-.02em;font-weight:620}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:28px;display:flex;flex-direction:column;
}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card h3{margin:0;font-size:21px;letter-spacing:-.015em;font-weight:620}
.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;border:1px solid;
}
.tag-live{color:var(--green);border-color:rgba(59,193,131,.35);background:rgba(59,193,131,.08)}
.tag-dev{color:var(--amber);border-color:rgba(224,154,60,.35);background:rgba(224,154,60,.08)}
.card p{margin:0 0 18px;color:var(--dim);font-size:15px}
.card ul{margin:0 0 24px;padding:0;list-style:none}
.card li{
  position:relative;padding-left:20px;color:var(--dim);font-size:14.5px;margin-bottom:8px;
}
.card li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;background:#31404E;
}
.card .foot{margin-top:auto}
.card .foot a{font-size:14px;text-decoration:none;color:var(--ink);border-bottom:1px solid #31404E;padding-bottom:2px}
.card .foot a:hover{border-color:var(--ink)}
.card .foot span{font-size:14px;color:var(--dim)}

/* ---------- contact ---------- */
.contact{padding:0 0 88px}
.contact-box{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:44px;text-align:center;
}
.contact h2{margin:0 0 12px;font-size:28px;letter-spacing:-.02em;font-weight:620}
.contact p{margin:0 auto 22px;color:var(--dim);max-width:52ch;font-size:15.5px}
.mail{
  font-family:var(--mono);font-size:15px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid #31404E;padding-bottom:3px;
}
.mail:hover{border-color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--dim)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .thesis-grid{grid-template-columns:1fr;gap:28px}
  .cards{grid-template-columns:1fr}
  h1{font-size:40px}
  .hero{padding:64px 0 56px}
  nav a:not(.cta){display:none}
}
@media (max-width:520px){
  h1{font-size:33px}
  .reading .value{font-size:44px}
  .ticks-row span:nth-child(4){display:none}
  .inst-foot{flex-direction:column;gap:4px}
  .contact-box{padding:30px 22px}
  footer .wrap{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .needle{animation:none}
  *{transition:none!important}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* --------------------------------------------------------------------------
   Posiciones de la escala del manometro.

   Sustituyen a los style="left:..." que la maqueta llevaba en linea. Son
   valores CALCULADOS: cada uno situa su etiqueta sobre el punto exacto del
   rail de 420 unidades del SVG que le corresponde, y la aguja (x=238) esta
   colocada en coherencia con ellos.

   NO se redondean ni se ajustan a ojo. Si se mueven, la escala deja de
   coincidir con la aguja y el instrumento pasa a mentir.

   El ORDEN de los span tambien importa: .ticks-row span:nth-child(3) pinta el
   tercero en verde (es el limite) y :nth-child(4) se oculta en pantallas
   estrechas. Esos selectores dependen de la posicion, no de estas clases.
   -------------------------------------------------------------------------- */
.tick-1{left:0%}
.tick-2{left:41.7%}
.tick-3{left:75%}
.tick-4{left:83.3%}
.tick-5{left:100%}