/* ------------------------------------------------------------------
   Sección «Trabaja con nosotros» de la portada.
   Va en un archivo aparte a propósito: estilo.css no se toca, así que
   si algo no gusta se quita el <link> y el sitio queda como estaba.
   Usa solo variables que ya define estilo.css, por eso se carga después.
   ------------------------------------------------------------------ */

.empleo{
  background:var(--banda-fondo); color:var(--sobre-oscuro);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.empleo .rotulo{color:var(--sobre-oscuro-2)}
.empleo .rotulo b{color:var(--sobre-oscuro)}
.empleo .tit{color:#fff; max-width:17ch}
.empleo .intro{color:var(--sobre-oscuro-2); max-width:54ch}

.empleo-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center}
@media(max-width:900px){.empleo-grid{grid-template-columns:1fr; gap:34px}}

.empleo-puntos{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.empleo-puntos li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  background:var(--tarjeta-oscura); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); padding:18px 20px;
}
.empleo-puntos .n{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  color:var(--amarillo); padding-top:4px;
}
.empleo-puntos b{display:block; font-size:15.5px; font-weight:700; color:#fff; letter-spacing:-.01em; line-height:1.3}
.empleo-puntos span{display:block; margin-top:5px; font-size:14px; line-height:1.55; color:var(--sobre-oscuro-2)}

.empleo .acciones{margin-top:30px}
.empleo-nota{
  margin-top:18px; font-family:var(--f-mono); font-size:12.5px; line-height:1.6;
  color:var(--sobre-oscuro-2); max-width:52ch;
}
.empleo-nota a{color:var(--amarillo); text-decoration:none; border-bottom:1px solid rgba(250,194,21,.45)}
.empleo-nota a:hover{border-bottom-color:var(--amarillo)}

/* ------------------------------------------------------------------
   Menú principal: que nunca se esconda tras el botón en escritorio.
   app.js mide el menú y le pone .no-cabe (display:none) cuando no entra,
   dejando solo el botón «Menú». Con ocho secciones eso pasaba.
   Aquí se resuelve como corresponde: tipografía un punto más chica y,
   si aun así no entra, el menú baja a dos líneas y la barra crece.
   Bajo 1220 px no se toca nada: ahí el botón «Menú» es lo correcto.
   ------------------------------------------------------------------ */
@media(min-width:1221px){
  .menu.no-cabe{display:flex}
  .menu{
    flex-wrap:wrap; justify-content:flex-end; align-content:center;
    overflow:visible; gap:3px 0;
  }
  .menu a{font-size:11.5px; padding:9px 5px}
  .barra .env{gap:12px; height:auto; min-height:78px; padding-top:9px; padding-bottom:9px}
}

/* ------------------------------------------------------------------
   Botón flotante de empleo. Hermano del de WhatsApp y con el mismo
   comportamiento: se repliega cuando el bloque de contacto está en
   pantalla. Eso lo decide app.js poniendo .replegado en #wa-flota;
   aquí se engancha con el selector de hermano, sin JavaScript nuevo
   (la CSP del sitio no admite scripts en línea).
   Por eso el <a> va SIEMPRE después de #wa-flota en el HTML.
   ------------------------------------------------------------------ */
.empleo-flota{
  position:fixed; right:22px; bottom:94px; z-index:55;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px 13px 15px; border-radius:999px;
  background:var(--amarillo); color:var(--carbon-noche);
  font-size:14px; font-weight:700; letter-spacing:-.01em; line-height:1;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 8px 26px -6px rgba(250,194,21,.6), 0 2px 8px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .16s ease, background .16s ease,
             opacity .2s ease, visibility .2s ease;
}
.empleo-flota:hover{
  background:var(--amarillo-alto); transform:translateY(-3px);
  box-shadow:0 14px 34px -8px rgba(250,194,21,.7);
}
.empleo-flota svg{width:21px; height:21px; fill:currentColor; flex:none}
#wa-flota.replegado ~ .empleo-flota{opacity:0; visibility:hidden; transform:translateY(14px)}
@media(max-width:640px){
  .empleo-flota{right:16px; bottom:80px; padding:11px 15px 11px 13px; font-size:13px; gap:8px}
  .empleo-flota svg{width:19px; height:19px}
}
@media(prefers-reduced-motion:reduce){
  .empleo-flota{transition:opacity .2s ease, visibility .2s ease}
  .empleo-flota:hover{transform:none}
}