/* Estilos de las landings por oficio (public/oficios/*.html, generadas por
   scripts/paginas-oficio/generar.js). Comparte la paleta con la landing
   principal, pero en una hoja aparte y cacheable: son 19 páginas y repetir el
   CSS embebido en cada una sería peso muerto en cada visita. */
:root{
  --fondo:#070d15; --fondo2:#0b1520; --tinta:#eaf2fa; --sub:#8fa6ba;
  --cel:#2f9dff; --cel2:#1f7ae0; --oro:#e3a72f; --verde:#3ddc7a;
  --line:rgba(143,166,186,.16); --card:rgba(17,30,45,.65);
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--fondo);
  color:var(--tinta); line-height:1.65; }
a{ color:var(--cel); }

.nav{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 5%; border-bottom:1px solid var(--line); background:rgba(7,13,21,.72);
  position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.nav .marca{ display:flex; align-items:center; gap:10px; font-weight:800; text-decoration:none; color:var(--tinta); }
.nav .marca img{ width:32px; height:32px; border-radius:8px; }
.nav .marca em{ font-style:normal; color:var(--oro); }
.nav .cta{ background:var(--verde); color:#04240f; padding:9px 18px; border-radius:10px;
  font-weight:800; text-decoration:none; font-size:.9rem; }

main{ max-width:820px; margin:0 auto; padding:0 6% 80px; }
section{ padding:44px 0; border-bottom:1px solid var(--line); }
section:last-child{ border-bottom:0; }

.hero{ padding-top:56px; }
.kicker{ display:inline-block; border:1px solid var(--line); background:rgba(31,122,224,.1);
  color:#9fd0ff; border-radius:999px; padding:6px 16px; font-size:.74rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:18px; }
h1{ font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.12; font-weight:800; letter-spacing:-.015em; }
h2{ font-size:clamp(1.25rem,3vw,1.6rem); font-weight:800; margin-bottom:14px; }
.lead{ color:var(--sub); font-size:1.05rem; margin-top:18px; }
p{ margin-bottom:12px; }
p:last-child{ margin-bottom:0; }

.botones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.b1{ background:linear-gradient(92deg,var(--cel2),var(--cel)); color:#fff; text-decoration:none;
  font-weight:800; padding:14px 26px; border-radius:12px; display:inline-block; }
.b2{ color:var(--tinta); text-decoration:none; font-weight:700; padding:14px 22px;
  border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); }

.chat{ display:flex; flex-direction:column; gap:10px; margin:8px 0 16px; }
.chat .m{ max-width:86%; padding:11px 15px; border-radius:14px; font-size:.94rem; }
.chat .cli{ align-self:flex-end; background:#12354f; border-bottom-right-radius:4px; }
.chat .bot{ align-self:flex-start; background:#101c29; border:1px solid var(--line);
  border-bottom-left-radius:4px; }

.trabajos{ width:100%; border-collapse:collapse; margin:16px 0; font-size:.94rem; }
.trabajos th{ text-align:left; color:var(--sub); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; padding:8px 10px; border-bottom:1px solid var(--line); }
.trabajos td{ padding:11px 10px; border-bottom:1px solid var(--line); }
.trabajos .dur{ text-align:right; color:var(--sub); white-space:nowrap; }

.nota{ color:var(--sub); font-size:.88rem; margin-top:12px; }
.cierre{ text-align:center; }
.cierre .b1{ margin-top:8px; }

.lista-oficios{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.lista-oficios li{ border:1px solid var(--line); border-radius:14px; background:var(--card); }
.lista-oficios a{ display:block; padding:16px 18px 6px; font-weight:700; text-decoration:none; }
.lista-oficios span{ display:block; padding:0 18px 16px; color:var(--sub); font-size:.82rem; }

footer{ border-top:1px solid var(--line); padding:26px 6%; text-align:center;
  color:var(--sub); font-size:.82rem; }
footer a{ color:var(--sub); }

@media (max-width:560px){
  .nav .marca span{ font-size:.95rem; }
  .botones .b1, .botones .b2{ flex:1; text-align:center; }
}