/* ═══════════════════════════════════════════════════════════════════════
   empleo.css · Babyloon · bloque 49.4 (reescritura)

   POR QUÉ SE REESCRIBE. La versión anterior daba una página correcta y
   plana: una columna de texto a la izquierda, media pantalla vacía a la
   derecha, seis mil píxeles de alto y ni una transición. Se leía como un
   documento bien escrito, no como una empresa. Y el listón que puso
   Andrés es `jobs.uber.com`, que es otra cosa: portada a sangre,
   movimiento, densidad, y un buscador que funciona.

   LO QUE CAMBIA, Y POR QUÉ CADA COSA

   1. LA PORTADA ES DE ALTURA COMPLETA Y LLEVA VÍDEO DETRÁS. Con velo
      encima, porque un titular claro sobre un vídeo claro desaparece la
      mitad del tiempo y eso no se puede probar contra un vídeo que
      todavía no existe. `.sin-video` dibuja la portada con degradados y
      arcos de la casa: si el fichero no está, la página no enseña un
      rectángulo negro — enseña algo terminado.

   2. HAY UN SISTEMA DE MOVIMIENTO, NO EFECTOS SUELTOS. Una sola clase
      `.rv` (revelar) con retardo escalonado entre hermanos, y todo
      apagado de golpe con `prefers-reduced-motion`. IMPORTANTE: el estado
      oculto vive bajo `.js`, que pone `empleo.js` al arrancar. Sin
      JavaScript no se oculta nada. Una página de empleo en blanco porque
      falló un script es una página de empleo que no existe.

   3. LA BARRA DEL BUSCADOR SE QUEDA PEGADA al llegar a los puestos. Es la
      diferencia entre filtrar y volver a subir para filtrar.

   4. LAS TARJETAS TIENEN ESTADO: elevación, línea de acento y dos píxeles
      de desplazamiento al pasar por encima. Suena a poco y es lo que
      separa una lista de una interfaz.

   LO QUE NO CAMBIA. Los nombres de clase que pinta `empleo.js` —`.vac-i`,
   `.detalle`, `.cond-i`, `.reloj-c`, `.ciu`, `.emp-vacio`, `.emp-fallo`—
   son los mismos. Esto es una reescritura de la piel, no del motor.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --medida:1180px;
  /* La mitad oscura de la banda del día. No es un gris: lleva el morado de
     la casa para que la banda encendida y la apagada sean la misma familia. */
  --noche:rgba(140,116,130,.26);
  --raya:rgba(200,169,106,.13);
  --carta:rgba(255,255,255,.028);
  --carta-borde:rgba(200,169,106,.15);
  --suave:cubic-bezier(.22,.61,.36,1);
}

.emp .wrap{max-width:var(--medida)}

/* Saltar al contenido: sólo se ve al tabular, pero quien navega con
   teclado no tiene por qué recorrer ocho pantallas para llegar a los
   puestos, que es a lo que viene. */
/* `left:-9999px` NO: además de romperse en árabe —donde «izquierda» es el
   otro lado— deja el enlace fuera del lienzo y el detector de desbordes lo
   marca, con razón, como algo que se sale de la página. Diez avisos de
   veinte eran esto. La forma correcta es reducirlo a un píxel y recortarlo:
   ocupa su sitio, no se ve, y al tabular vuelve entero. */
.saltar{position:absolute;top:0;inset-inline-start:0;z-index:60;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--gold);color:#1a1418;padding:0;font-size:13px;letter-spacing:.06em}
.saltar:focus{width:auto;height:auto;overflow:visible;clip-path:none;
  padding:12px 18px;border-end-end-radius:8px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Cabecera ────────────────────────────────────────────────────────────
   Transparente sobre la portada y sólida al bajar; el cambio lo dispara
   `empleo.js` con la clase `.pegada`. La navegación interna es lo que
   convierte una página larga en un sitio: sin ella, ocho pantallas de
   scroll son ocho pantallas de scroll. */
.emp header{background:transparent;border-bottom:1px solid transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .34s var(--suave),border-color .34s var(--suave)}
.emp header.pegada{background:rgba(13,11,15,.84);border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.emp .nav{display:flex;align-items:center;gap:clamp(12px,3vw,34px)}
.emp-nav{display:none;gap:clamp(14px,2.4vw,28px);margin-inline-start:auto}
.emp-nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);
  position:relative;padding-block:6px;white-space:nowrap}
.emp-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--suave)}
.emp-nav a:hover::after,.emp-nav a.activo::after{transform:scaleX(1)}
.emp-nav a.activo{color:var(--cream)}
.emp-cta-nav{margin-inline-start:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 18px;color:var(--cream);white-space:nowrap;
  transition:border-color .3s var(--suave),background .3s var(--suave)}
.emp-cta-nav:hover{border-color:var(--gold);background:rgba(200,169,106,.09)}
@media (min-width:940px){
  .emp-nav{display:flex}
  .emp-cta-nav{margin-inline-start:0}
}

/* ── Portada ─────────────────────────────────────────────────────────── */
.emp-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(92svh,880px);display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:120px}
.hero-fondo{position:absolute;inset:0;z-index:-1}
.hero-fondo video{width:100%;height:100%;object-fit:cover;display:block;
  /* El vídeo se mueve a la mitad del recorrido del scroll para que el
     fondo no compita con el titular. Lo pone `empleo.js` en `--par`. */
  transform:translate3d(0,var(--par,0px),0) scale(1.06);will-change:transform}
.emp-hero.sin-video video{display:none}

/* El respaldo dibujado: dos arcos de la marca y dos focos de color. Misma
   familia visual que el infinito de la cabecera y no pesa un byte. */
.hero-dibujo{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--suave);
  background:
    radial-gradient(90% 60% at 78% 18%,rgba(200,169,106,.16),transparent 62%),
    radial-gradient(70% 55% at 12% 88%,rgba(140,116,130,.20),transparent 66%),
    linear-gradient(160deg,#151018 0%,#0D0B0F 48%,#171018 100%)}
.emp-hero.sin-video .hero-dibujo{opacity:1}
.hero-dibujo::before,.hero-dibujo::after{content:'';position:absolute;border-radius:50%;
  border:1px solid rgba(200,169,106,.13)}
.hero-dibujo::before{width:min(760px,86vw);aspect-ratio:1;right:-14%;top:-26%;
  border-color:rgba(200,169,106,.22);
  box-shadow:inset 0 0 120px rgba(200,169,106,.05)}
.hero-dibujo::after{width:min(520px,62vw);aspect-ratio:1;right:2%;top:-8%;
  border-color:rgba(200,169,106,.14)}

.hero-velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,11,15,.80) 0%,rgba(13,11,15,.44) 34%,rgba(13,11,15,.74) 72%,rgba(13,11,15,.96) 100%)}
.emp-hero.sin-video .hero-velo{background:linear-gradient(180deg,rgba(13,11,15,.55) 0%,rgba(13,11,15,.16) 40%,rgba(13,11,15,.70) 100%)}

/* `width:100%` Y NO ES REDUNDANTE. `.wrap` lleva `margin-inline:auto`, y
   un elemento flexible con márgenes automáticos DEJA de estirarse: se
   queda del ancho de su contenido y se centra. Resultado medido: el
   titular empezaba en x=332 mientras la cabecera y el reloj empezaban en
   x=130. Tres alineaciones distintas en la misma portada. */
.hero-cuerpo{padding-block:clamp(26px,6vh,64px) clamp(22px,4vh,40px);position:relative;width:100%}
.emp-hero .eyebrow{display:block;margin-bottom:16px}
.emp-hero h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,11.6vw,112px);line-height:.9;letter-spacing:-.018em;
  margin:0 0 .3em;max-width:16ch;text-wrap:balance}
.emp-hero p.lead{font-size:clamp(15px,2.1vw,19px);line-height:1.6;color:var(--smoke);max-width:60ch;margin:0}
.emp-hero p.lead strong{color:var(--cream);font-weight:400}

/* El buscador dentro de la portada: es lo que dice, sin una palabra, que
   esta página tiene puestos dentro. */
.hero-buscar{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(22px,4vh,34px);max-width:600px}
.hero-buscar input{flex:1 1 240px;min-width:0;background:rgba(255,255,255,.06);
  border:1px solid var(--carta-borde);border-radius:999px;color:var(--cream);
  padding:14px 20px;font-family:var(--sans);font-size:15px;
  transition:border-color .3s var(--suave),background .3s var(--suave)}
.hero-buscar input::placeholder{color:rgba(232,224,213,.52)}
.hero-buscar input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.09)}
.hero-buscar button{flex:none;background:var(--gold-grad);color:#1a1418;border:0;border-radius:999px;
  padding:14px 26px;font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:transform .25s var(--suave),filter .25s var(--suave)}
.hero-buscar button:hover{transform:translateY(-1px);filter:brightness(1.07)}

/* ── La banda del día, pegada al borde de la portada ─────────────────── */
.hero-reloj{position:relative;border-top:1px solid var(--raya);
  background:linear-gradient(180deg,transparent,rgba(13,11,15,.52));padding-block:18px 22px}
.reloj-rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
@media (min-width:600px){.reloj-rej{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:980px){.reloj-rej{grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}}
.reloj-c{border-top:1px solid var(--noche);padding-top:9px;min-width:0;
  transition:border-color .8s var(--suave)}
.reloj-c .ciu{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(232,224,213,.5);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reloj-c .hora{display:block;font-family:var(--serif);font-size:clamp(19px,3vw,25px);
  line-height:1;color:rgba(232,224,213,.34);font-variant-numeric:tabular-nums;
  transition:color .8s var(--suave)}
.reloj-c.dia{border-top-color:var(--gold)}
.reloj-c.dia .hora{color:var(--cream)}
.reloj-pie{font-size:11.5px;line-height:1.55;color:rgba(232,224,213,.44);max-width:62ch;margin:16px 0 0}

/* La flecha de bajar se ha quitado: medida, caía justo encima del pie del
   reloj y lo tapaba. Y sobraba — una banda de siete relojes en marcha ya
   dice que la página sigue hacia abajo. */

/* ── Banda de cifras ─────────────────────────────────────────────────── */
.emp-cifras-band{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.emp-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;
  padding-block:clamp(30px,5vw,48px)}
@media (min-width:760px){.emp-cifras{grid-template-columns:repeat(4,minmax(0,1fr))}}
.emp-cifras b{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,6.6vw,64px);line-height:.95;color:var(--cream);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.emp-cifras span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-top:10px}

/* ── Secciones ───────────────────────────────────────────────────────── */
.emp-sec{padding-block:clamp(54px,9vw,104px);border-bottom:1px solid var(--line);position:relative}
.emp-sec-alt{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004))}
.emp-sec>.wrap>.eyebrow{display:block;margin-bottom:14px}
.emp-sec h2{font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,5.4vw,54px);line-height:1.04;letter-spacing:-.012em;
  margin:0 0 18px;max-width:20ch;text-wrap:balance}
.emp-sec>.wrap>p{color:var(--smoke);max-width:68ch;font-size:15.5px;line-height:1.66;margin:0}

/* ── Razones ─────────────────────────────────────────────────────────────
   CUATRO PIEZAS POR RAZÓN, y las cuatro ya estaban escritas en los
   dieciséis idiomas desde el bloque 46.9: el gancho (`_k`), el título
   (`_t`), el cuerpo (`_a`) y una segunda línea que dice la parte
   incómoda (`_b`) — «es una empresa pequeña y sin plantilla que la
   sostenga; hay que estar a gusto con eso». Esa segunda línea es lo que
   separa una página de empleo honesta de un folleto, así que la
   maquetación tiene que hacerle sitio en vez de tirarla. */
.razones{display:grid;gap:0;margin-top:clamp(30px,5vw,54px);border-top:1px solid var(--raya)}
.razon{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px clamp(14px,4vw,44px);
  align-items:start;padding-block:clamp(24px,4vw,40px);border-bottom:1px solid var(--raya);
  transition:background .4s var(--suave)}
.razon:hover{background:rgba(255,255,255,.015)}
.razon .n{font-family:var(--serif);font-size:clamp(22px,4vw,40px);line-height:1;
  color:transparent;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  font-variant-numeric:tabular-nums}
.razon .k{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.razon h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.9vw,28px);
  margin:0;color:var(--cream);line-height:1.18;text-wrap:balance}
.razon p{color:var(--smoke);max-width:60ch;margin:0;font-size:15px;line-height:1.66}
.razon .mas{margin-top:11px;color:rgba(232,224,213,.55);font-size:13.8px;
  padding-inline-start:13px;border-inline-start:1px solid var(--raya)}
.razon .r-izq{grid-column:2}
.razon .r-der{grid-column:2}
@media (min-width:920px){
  .razon{grid-template-columns:auto minmax(0,.8fr) minmax(0,1.2fr);align-items:start;gap:clamp(20px,4vw,48px)}
  .razon .r-izq{grid-column:2}
  .razon .r-der{grid-column:3}
}

/* ── Áreas ───────────────────────────────────────────────────────────────
   SIN FOTOGRAFÍA, Y POR UNA RAZÓN QUE SE SOSTIENE: no hay equipo todavía,
   así que cualquier foto de «nuestro equipo» sería de un banco de
   imágenes. Una foto prestada en la página que dice que aquí se escribe
   todo y no se inventa nada la desmiente en el primer golpe de vista.
   Cada área lleva una marca dibujada, que sí es nuestra. */
.areas{display:grid;gap:clamp(12px,2vw,20px);margin-top:clamp(30px,5vw,54px)}
@media (min-width:720px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.area{position:relative;background:var(--carta);border:1px solid var(--carta-borde);
  border-radius:16px;padding:clamp(20px,3.2vw,32px);overflow:hidden;
  transition:transform .4s var(--suave),border-color .4s var(--suave),background .4s var(--suave)}
.area::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;
  background:var(--gold-grad);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--suave)}
.area:hover{transform:translateY(-3px);border-color:rgba(200,169,106,.34);background:rgba(255,255,255,.045)}
.area:hover::before{transform:scaleY(1)}
.area .marca{width:46px;height:46px;margin-bottom:16px;display:block;
  fill:none;stroke:url(#gg);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.area h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.6vw,25px);
  margin:0 0 10px;color:var(--cream)}
.area>p{color:var(--smoke);font-size:14.6px;line-height:1.64;margin:0}
.area .semana{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--raya)}
.area .semana span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.area .semana em{font-style:normal;color:rgba(232,224,213,.62);font-size:13.6px;line-height:1.6;display:block}

/* ── Ciudades ────────────────────────────────────────────────────────────
   La foto entra como `<img>` dentro de un `<picture>`, no como fondo de
   CSS: un fondo no entiende de `srcset` y obligaba a cualquier móvil a
   bajarse la imagen de escritorio. Si no llega, la tarjeta se sostiene
   sola con su degradado y su hora — no queda un hueco gris. */
.ciudades-rej{display:grid;gap:clamp(10px,1.6vw,16px);margin-top:clamp(30px,5vw,50px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:680px){.ciudades-rej{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.ciudades-rej{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ciu-c{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px solid var(--carta-borde);isolation:isolate;
  background:linear-gradient(165deg,rgba(140,116,130,.22),rgba(13,11,15,.9) 62%);
  transition:transform .45s var(--suave),border-color .45s var(--suave)}
@media (min-width:680px){.ciu-c{aspect-ratio:4/5}}
.ciu-c::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,11,15,.12) 0%,rgba(13,11,15,.72) 62%,rgba(13,11,15,.94) 100%)}
.ciu-c:hover{transform:translateY(-3px);border-color:rgba(200,169,106,.38)}
.ciu-t{position:absolute;left:0;right:0;bottom:0;padding:14px 15px 15px}
.ciu-t .n{display:block;font-family:var(--serif);font-size:clamp(17px,2.3vw,21px);
  line-height:1.15;color:var(--cream);margin-bottom:4px}
.ciu-t .h{display:block;font-size:12.5px;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.ciu-t .p{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,224,213,.5);margin-top:5px}
.ciu-c .punto{position:absolute;top:12px;inset-inline-end:12px;width:7px;height:7px;border-radius:50%;
  background:rgba(232,224,213,.24)}
.ciu-c.dia .punto{background:var(--gold);box-shadow:0 0 0 4px rgba(200,169,106,.16)}
#ciudades .ir{margin-top:clamp(24px,3.4vw,32px)}

/* ── Condiciones ─────────────────────────────────────────────────────── */
.cond{display:grid;gap:clamp(10px,1.4vw,14px);margin-top:clamp(26px,4vw,42px)}
@media (min-width:760px){.cond{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cond.cond-uno{grid-template-columns:1fr}
.cond-i{background:var(--carta);border:1px solid var(--carta-borde);border-radius:14px;
  padding:clamp(18px,2.6vw,26px);transition:border-color .4s var(--suave)}
.cond-i:hover{border-color:rgba(200,169,106,.3)}
.cond-i h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 9px;color:var(--cream)}
.cond-i p{color:var(--smoke);font-size:14.6px;line-height:1.65;margin:0;white-space:pre-line}

/* ── Barra del buscador ──────────────────────────────────────────────── */
.barra-busq{position:sticky;top:56px;z-index:20;margin-top:clamp(26px,4vw,40px);
  padding-block:16px;background:rgba(13,11,15,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--raya);border-bottom:1px solid var(--raya)}
.busq{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.busq-campo{position:relative;flex:1 1 260px;min-width:0;display:flex;align-items:center}
.busq-campo svg{position:absolute;inset-inline-start:15px;width:16px;height:16px;
  fill:none;stroke:rgba(232,224,213,.45);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.busq-campo input{width:100%;background:rgba(255,255,255,.045);border:1px solid var(--carta-borde);
  border-radius:999px;color:var(--cream);padding:11px 18px 11px 40px;
  font-family:var(--sans);font-size:14.5px;transition:border-color .3s var(--suave)}
.busq-campo input::placeholder{color:rgba(232,224,213,.45)}
.busq-campo input:focus{outline:none;border-color:var(--gold)}
html[dir="rtl"] .busq-campo input{padding:11px 40px 11px 18px}
.limpiar{background:none;border:1px solid var(--carta-borde);border-radius:999px;color:var(--smoke);
  padding:10px 16px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:border-color .3s var(--suave),color .3s var(--suave)}
.limpiar:hover{border-color:var(--gold);color:var(--cream)}
/* Los dos grupos de filtros se leían como una sola fila de siete botones:
   «Todas · Producto · Atención · Cumplimiento · Cualquier modalidad ·
   Remoto · Híbrido». El `aria-label` los separa para quien usa lector de
   pantalla; a la vista hacía falta una raya. Sólo desde 760 px: cuando
   caen en dos renglones, una raya lateral sobra. */
.filtros-fila{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:12px}
@media (min-width:760px){
  .filtros-fila .emp-filtros + .emp-filtros:not(:empty){
    padding-inline-start:22px;border-inline-start:1px solid var(--raya)}
}
.emp-filtros{display:flex;flex-wrap:wrap;gap:8px}
.emp-filtros button{background:none;border:1px solid var(--carta-borde);border-radius:999px;
  color:var(--smoke);padding:7px 15px;font-family:var(--sans);font-size:12.5px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color .3s var(--suave),color .3s var(--suave),background .3s var(--suave)}
.emp-filtros button i{font-style:normal;font-size:11px;color:rgba(232,224,213,.45);font-variant-numeric:tabular-nums}
.emp-filtros button:hover{border-color:rgba(200,169,106,.4);color:var(--cream)}
.emp-filtros button[aria-pressed="true"]{background:rgba(200,169,106,.14);border-color:var(--gold);color:var(--cream)}
.emp-filtros button[aria-pressed="true"] i{color:var(--gold)}
.cuenta-res{margin:12px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);min-height:1em}

/* ── Las vacantes ────────────────────────────────────────────────────── */
.emp-vac{display:grid;gap:12px;margin-top:clamp(22px,3.4vw,32px)}
.emp-cargando{color:rgba(232,224,213,.5);font-size:14px}
.vac-i{background:var(--carta);border:1px solid var(--carta-borde);border-radius:14px;overflow:hidden;
  transition:transform .35s var(--suave),border-color .35s var(--suave),background .35s var(--suave)}
.vac-i:hover{transform:translateY(-2px);border-color:rgba(200,169,106,.34);background:rgba(255,255,255,.042)}
.vac-i>button{width:100%;background:none;border:0;cursor:pointer;text-align:start;
  display:flex;gap:clamp(12px,2.4vw,26px);align-items:center;justify-content:space-between;
  padding:clamp(17px,2.4vw,24px);font-family:var(--sans);color:var(--cream);flex-wrap:wrap}
/* `display:block`, y no es un detalle: el título y el resumen son dos
   `<span>` dentro del botón —un `<h3>` dentro de un `<button>` no es HTML
   válido— y un `<span>` es EN LÍNEA, así que sin esto los dos textos
   salían pegados en el mismo renglón. Sólo se vio en una captura. */
.vac-i .tit{display:block;font-family:var(--serif);font-size:clamp(19px,2.6vw,23px);
  line-height:1.2;margin-bottom:5px}
.vac-i .res{display:block;font-size:13.8px;line-height:1.55;color:rgba(232,224,213,.62);max-width:62ch}
.vac-i .meta{display:flex;flex-wrap:wrap;gap:7px;flex:none}
.vac-i .meta span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--raya);border-radius:999px;padding:5px 11px;color:rgba(232,224,213,.62);white-space:nowrap}
.vac-i .meta span:first-child{border-color:rgba(200,169,106,.34);color:var(--gold)}
.vac-i .detalle{max-height:0;overflow:hidden;transition:max-height .45s var(--suave)}
.vac-i .detalle.visible{max-height:3200px}
.vac-i .detalle>div{padding:clamp(18px,2.4vw,22px) clamp(17px,2.4vw,24px) clamp(20px,2.8vw,26px);
  border-top:1px solid var(--raya)}
.vac-i .detalle h4{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--gold);
  margin:18px 0 8px;letter-spacing:.01em}
.vac-i .detalle h4:first-child{margin-top:0}
.vac-i .detalle p,.vac-i .detalle li{color:var(--smoke);font-size:14.6px;line-height:1.66;max-width:70ch}
.vac-i .detalle p{margin:0 0 10px}
.vac-i .detalle ul{margin:0 0 10px;padding-inline-start:20px}
.vac-i .detalle li{margin-bottom:6px}
.vac-i .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.compartir{background:none;border:1px solid var(--carta-borde);border-radius:999px;color:var(--smoke);
  padding:12px 20px;font-family:var(--sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;transition:border-color .3s var(--suave),color .3s var(--suave)}
.compartir:hover{border-color:var(--gold);color:var(--cream)}

.emp-vacio,.emp-fallo{background:var(--carta);border:1px solid var(--carta-borde);border-radius:16px;
  padding:clamp(26px,4vw,40px);text-align:center}
.emp-vacio h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,3vw,27px);margin:0 0 12px;color:var(--cream)}
.emp-vacio p,.emp-fallo p{color:var(--smoke);font-size:14.8px;line-height:1.66;margin:0 auto 20px;max-width:56ch}
.emp-fallo button{background:none;border:1px solid var(--gold);border-radius:999px;color:var(--cream);
  padding:11px 24px;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

.ir{display:inline-block;background:var(--gold-grad);color:#1a1418;border-radius:999px;
  padding:13px 26px;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:transform .28s var(--suave),filter .28s var(--suave)}
.ir:hover{transform:translateY(-1px);filter:brightness(1.07)}

/* ── Aviso de vacantes ───────────────────────────────────────────────────
   Lo que hace una página de empleo cuando hoy no hay nada para ti: no
   despedirte. */
.emp-alerta{border-bottom:1px solid var(--line)}
.alerta-caja{display:grid;gap:clamp(22px,4vw,48px);background:var(--carta);
  border:1px solid var(--carta-borde);border-radius:18px;
  padding:clamp(24px,4.4vw,46px);position:relative;overflow:hidden}
.alerta-caja::after{content:'';position:absolute;width:min(420px,60%);aspect-ratio:1;
  border:1px solid rgba(200,169,106,.12);border-radius:50%;right:-14%;top:-46%;pointer-events:none}
@media (min-width:900px){.alerta-caja{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.alerta-caja h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.6vw,36px);
  line-height:1.1;margin:12px 0;max-width:18ch}
.alerta-caja>div>p{color:var(--smoke);font-size:14.8px;line-height:1.65;margin:0;max-width:50ch}
.alerta-form{display:grid;gap:14px;position:relative}
.alerta-form .nota{font-size:12px;line-height:1.55;color:rgba(232,224,213,.45);margin:0}

/* ── Formularios ─────────────────────────────────────────────────────── */
.formulario{display:grid;gap:16px;margin-top:clamp(26px,4vw,40px)}
@media (min-width:760px){.formulario{grid-template-columns:repeat(2,minmax(0,1fr))}}
.campo{display:grid;gap:7px;min-width:0}
.campo.ancho{grid-column:1/-1}
.campo>span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.campo input,.campo select,.campo textarea{background:rgba(255,255,255,.045);
  border:1px solid var(--carta-borde);border-radius:10px;color:var(--cream);
  padding:12px 14px;font-family:var(--sans);font-size:15px;width:100%;min-width:0;
  transition:border-color .3s var(--suave),background .3s var(--suave)}
.campo textarea{min-height:120px;resize:vertical;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07)}
.campo select{appearance:none;cursor:pointer}
.campo select option{background:#171018;color:var(--cream)}
.fichero{grid-column:1/-1;display:grid;gap:7px}
.fichero>label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.fichero input[type=file]{font-family:var(--sans);font-size:13.5px;color:var(--smoke)}
.fichero input[type=file]::file-selector-button{background:none;border:1px solid var(--carta-borde);
  border-radius:999px;color:var(--cream);padding:9px 16px;font-family:var(--sans);font-size:12px;
  cursor:pointer;margin-inline-end:12px}
.fichero .nota{font-size:12px;color:rgba(232,224,213,.5);line-height:1.5}
.enviar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.enviar button{background:var(--gold-grad);color:#1a1418;border:0;border-radius:999px;
  padding:13px 28px;font-family:var(--sans);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  cursor:pointer;transition:transform .28s var(--suave),filter .28s var(--suave)}
.enviar button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}
.enviar button:disabled{opacity:.55;cursor:default}
.estado{font-size:13.5px;color:var(--smoke)}
.estado.mal{color:#E9A9A9}
.estado.bien{color:var(--gold)}

/* ── Avisos y cierre ─────────────────────────────────────────────────── */
.emp-aviso{border-inline-start:2px solid var(--gold);background:rgba(200,169,106,.05);
  border-radius:0 12px 12px 0;padding:clamp(18px,2.6vw,24px);margin-top:clamp(26px,4vw,38px)}
html[dir="rtl"] .emp-aviso{border-radius:12px 0 0 12px}
.emp-aviso p{color:var(--smoke);font-size:13.8px;line-height:1.66;margin:0 0 9px;max-width:74ch}
.emp-aviso p:last-child{margin-bottom:0}
.emp-aviso strong{color:var(--cream);font-weight:500}

.emp-cierre{padding-block:clamp(54px,9vw,100px);text-align:center;
  background:radial-gradient(70% 100% at 50% 0%,rgba(200,169,106,.07),transparent 70%)}
.emp-cierre h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,4.6vw,44px);
  line-height:1.1;margin:0 auto 16px;max-width:20ch}
.emp-cierre p{color:var(--smoke);margin:0 auto 26px;max-width:56ch;font-size:15.5px;line-height:1.65}

.hermanas{display:flex;flex-wrap:wrap;gap:12px 26px;padding-block:28px;border-top:1px solid var(--line)}
.hermanas a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.hermanas a:hover{color:var(--gold)}

/* ── Proceso ─────────────────────────────────────────────────────────── */
.pasos{display:grid;gap:clamp(14px,2vw,20px);margin:clamp(30px,5vw,50px) 0 0;padding:0;list-style:none}
@media (min-width:780px){.pasos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.paso-e{position:relative;padding-top:26px;border-top:1px solid var(--raya)}
.paso-e::before{content:'';position:absolute;top:-1px;inset-inline-start:0;width:0;height:1px;
  background:var(--gold);transition:width .8s var(--suave)}
.js .paso-e.visto::before{width:100%}
.paso-e .n{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold);
  display:block;margin-bottom:12px}
.paso-e h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2.4vw,22px);margin:0 0 9px;color:var(--cream)}
.paso-e p{color:var(--smoke);font-size:14px;line-height:1.62;margin:0}

/* ── EL SISTEMA DE MOVIMIENTO ────────────────────────────────────────────
   El estado oculto vive bajo `.js`, que pone `empleo.js` en cuanto
   arranca. Sin JavaScript no se oculta nada. */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--suave),transform .7s var(--suave)}
.js .rv.visto{opacity:1;transform:none}
.js .razones .rv:nth-child(2),.js .areas .rv:nth-child(2),.js .pasos .rv:nth-child(2){transition-delay:.07s}
.js .razones .rv:nth-child(3),.js .areas .rv:nth-child(3),.js .pasos .rv:nth-child(3){transition-delay:.14s}
.js .razones .rv:nth-child(4),.js .areas .rv:nth-child(4),.js .pasos .rv:nth-child(4){transition-delay:.21s}
.js .emp-cifras .rv:nth-child(2){transition-delay:.08s}
.js .emp-cifras .rv:nth-child(3){transition-delay:.16s}
.js .emp-cifras .rv:nth-child(4){transition-delay:.24s}

/* Movimiento reducido: se apaga TODO, no se atenúa. Y el vídeo se queda
   quieto, que es lo que de verdad molesta a quien pide esto. */
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .paso-e::before{width:100%;transition:none}
  .hero-baja span{animation:none}
  .hero-fondo video{transform:none}
  .area:hover,.vac-i:hover,.ciu-c:hover,.ir:hover,.hero-buscar button:hover,.enviar button:hover{transform:none}
  .reloj-c,.reloj-c .hora{transition:none}
}

/* ── Anchos pequeños ─────────────────────────────────────────────────── */
@media (max-width:470px){
  .emp-hero{min-height:auto;padding-top:96px}
  .emp-hero h1{font-size:clamp(40px,13vw,58px)}
  /* `flex:1 1 240px` en una fila es «como mínimo 240 px de ANCHO»; al
     girar a columna, ese 240 pasa a ser el ALTO, y el campo de búsqueda
     salía como un globo de 240 px en el móvil. Se vio en una captura en
     árabe. En columna el tamaño lo pone el contenido. */
  .hero-buscar{flex-direction:column;align-items:stretch}
  .hero-buscar input{flex:0 0 auto;width:100%}
  .hero-buscar button{width:100%}
  .barra-busq{top:52px;padding-block:13px}
  .vac-i>button{flex-direction:column;align-items:flex-start;gap:14px}
  .vac-i .meta{width:100%}
  .razon{grid-template-columns:1fr;gap:8px}
  .razon .n{font-size:20px}
  .emp-cifras b{font-size:clamp(32px,10vw,44px)}
  .alerta-caja{padding:22px 18px}
}

/* ══════════════════════════════════════════════════════════════════════
   BLOQUE 49.6 · LA PORTADA DE CIUDADES, EL GLOBO Y EL CONTADOR
   ══════════════════════════════════════════════════════════════════════ */

/* ── La portada ────────────────────────────────────────────────────────
   Ocho capas apiladas; sólo una lleva `.visible`. El acercamiento es una
   animación aparte de la transición de opacidad, y no chocan porque una
   toca `transform` y la otra `opacity`. Si las dos tocaran lo mismo, la
   segunda ganaría siempre y no habría fundido.
   ────────────────────────────────────────────────────────────────────── */
/* El velo lateral. El vertical que ya había no basta con fotos reales:
   medido sobre Marbella —pared blanca, girasoles, un cartel enorme— el
   titular quedaba ilegible justo donde está escrito. Este oscurece el
   lado del texto y deja la foto respirar en el otro, en vez de bajarle
   el brillo a toda la imagen hasta convertirla en barro gris.
   `to right` no es lógico, así que en árabe se voltea a mano. */
.emp-hero .hero-velo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,
    rgba(13,11,15,.94) 0%,rgba(13,11,15,.86) 26%,
    rgba(13,11,15,.52) 54%,rgba(13,11,15,.12) 78%,transparent 100%)}
[dir="rtl"] .emp-hero .hero-velo::after{
  background:linear-gradient(to left,
    rgba(13,11,15,.94) 0%,rgba(13,11,15,.86) 26%,
    rgba(13,11,15,.52) 54%,rgba(13,11,15,.12) 78%,transparent 100%)}
/* Sin fotos no hay nada que tapar: el dibujo de respaldo ya es oscuro. */
.emp-hero.sin-fotos .hero-velo::after{opacity:0}
@media (max-width:760px){
  /* En vertical el texto ocupa el ancho entero, así que el velo también. */
  .emp-hero .hero-velo::after,[dir="rtl"] .emp-hero .hero-velo::after{
    background:linear-gradient(180deg,
      rgba(13,11,15,.58) 0%,rgba(13,11,15,.82) 46%,rgba(13,11,15,.94) 100%)}
}

.hero-fotos{position:absolute;inset:0;overflow:hidden}
.hero-foto{position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:#0D0B0F;opacity:0;transform:scale(1.05);
  transition:opacity 1.8s var(--suave);will-change:opacity}
.hero-foto.visible{opacity:1;animation:bbl-ken 8.4s var(--suave) forwards}
@keyframes bbl-ken{from{transform:scale(1.05)}to{transform:scale(1.15)}}

/* El dibujo de respaldo sólo manda cuando NO hay ni vídeo ni fotos. Antes
   bastaba con `.sin-video`, y ahora eso dejaría el dibujo encendido por
   encima de las fotos para siempre. */
.emp-hero.sin-video .hero-dibujo{opacity:0}
.emp-hero.sin-video.sin-fotos .hero-dibujo{opacity:1}
.emp-hero.sin-video.sin-fotos .hero-velo{
  background:linear-gradient(180deg,rgba(13,11,15,.55) 0%,rgba(13,11,15,.16) 40%,rgba(13,11,15,.70) 100%)}

/* El rótulo de la ciudad. Va donde no estorba al titular y se lee sin
   competir con él: a la derecha en lectura de izquierda a derecha, y a
   la izquierda en árabe, que es lo que hace `inset-inline-end`. */
.hero-ciudad{position:absolute;inset-inline-end:clamp(16px,4vw,42px);
  bottom:calc(clamp(74px,12vh,104px) + 14px);
  margin:0;text-align:end;pointer-events:none;z-index:1}
.hero-ciudad .n{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(15px,2vw,19px);color:var(--cream);line-height:1.2}
.hero-ciudad .h{display:block;font-size:11.5px;letter-spacing:.14em;
  color:var(--gold);font-variant-numeric:tabular-nums;margin-top:3px}
@media (max-width:560px){.hero-ciudad{display:none}}   /* ahí abajo estorba */

/* ── Las tarjetas de ciudad ────────────────────────────────────────────
   La foto pasó de fondo de CSS a `<img>` dentro de un `<picture>`: un
   fondo no entiende de `srcset`, así que un móvil se bajaba la imagen de
   escritorio. El `::before` que la pintaba ya no hace falta.
   ────────────────────────────────────────────────────────────────────── */
.ciu-f{position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .8s var(--suave)}
.ciu-c:hover .ciu-f{transform:scale(1.09)}

/* Se llega aquí pulsando un punto del globo: un destello corto que dice
   «es ésta» y se apaga solo. */
.ciu-c.senalada{border-color:var(--gold)}
.ciu-c.senalada::after{box-shadow:inset 0 0 0 2px rgba(200,169,106,.55)}

/* ── El globo ──────────────────────────────────────────────────────────
   Cuadrado y centrado. El lienzo se dimensiona en JavaScript con la
   densidad real de la pantalla, así que aquí sólo se le da sitio.
   ────────────────────────────────────────────────────────────────────── */
.globo-caja{margin-top:clamp(30px,5vw,52px);display:flex;flex-direction:column;
  align-items:center;gap:clamp(14px,2vw,20px)}
/* `hidden` es un atributo, y el navegador lo aplica con `[hidden]{display:none}`
   en su hoja por defecto — que pierde contra cualquier selector de clase. Sin
   esta línea, `globoCaja.hidden = true` no escondía nada: el navegador sin
   canvas se quedaba mirando un hueco. Lo cazó la medición, no la lectura. */
.globo-caja[hidden]{display:none}
.globo-caja canvas{display:block;max-width:100%;height:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55))}
.globo-pie{max-width:52ch;text-align:center;margin:0;
  font-size:13px;line-height:1.6;color:rgba(232,224,213,.56)}

/* ── «Lo que no hay» ───────────────────────────────────────────────────
   Sin tarjeta, sin marco y sin icono. Es la única sección de la página
   que no tiene nada alrededor, y eso es el diseño: el texto solo, porque
   lo que dice es que aquí todavía no hay nada que enseñar.
   ────────────────────────────────────────────────────────────────────── */
.emp-desnuda{position:relative;overflow:hidden}
.emp-desnuda::before{content:'';position:absolute;z-index:-1;
  width:min(620px,90vw);aspect-ratio:1;border-radius:50%;
  inset-inline-start:-14%;top:-30%;
  background:radial-gradient(circle,rgba(140,116,130,.14),transparent 66%)}
.desnuda-txt{max-width:62ch;margin-top:clamp(24px,4vw,38px);
  display:flex;flex-direction:column;gap:clamp(16px,2.4vw,24px)}
.desnuda-txt p{margin:0;font-size:clamp(15px,2vw,17px);line-height:1.68;color:var(--smoke)}
.desnuda-txt p.destacado{font-family:var(--serif);font-weight:300;
  font-size:clamp(20px,3.4vw,30px);line-height:1.32;color:var(--cream);
  padding-inline-start:clamp(14px,2vw,20px);
  border-inline-start:1px solid rgba(200,169,106,.42)}

/* ── El contador de pasos ──────────────────────────────────────────────
   Pegado arriba mientras se recorre la sección, y fuera en cuanto se sale
   de ella. `position:sticky` y no `fixed`: pegajoso se queda dentro de su
   sección solo, mientras que fijo habría que apagarlo a mano y se queda
   colgado en cuanto algo falla.
   ────────────────────────────────────────────────────────────────────── */
/* Sólo donde los pasos se apilan. A partir de 780 px `.pasos` los pone en
   cuatro columnas y se ven los cuatro de golpe: ahí un contador de «por
   cuál vas» responde a una pregunta que nadie se hace. Lo cazó la
   medición — los cuatro pasos daban el mismo rectángulo, 334→530, que es
   lo que pasa cuando son vecinos horizontales y no un recorrido. */
.pasos-cuenta{display:none}
@media (max-width:779px){
.pasos-cuenta{position:sticky;top:clamp(74px,11vh,96px);z-index:2;
  display:flex;align-items:baseline;gap:7px;width:max-content;
  margin-block:clamp(18px,3vw,28px) calc(-1 * clamp(18px,3vw,28px));
  padding:7px 14px;border-radius:999px;
  background:rgba(13,11,15,.72);border:1px solid rgba(200,169,106,.20);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(-6px);
  transition:opacity .45s var(--suave),transform .45s var(--suave)}
.pasos-cuenta.visible{opacity:1;transform:none}
.pasos-cuenta b{font-family:var(--serif);font-weight:300;font-size:19px;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1}
.pasos-cuenta i{width:16px;height:1px;background:rgba(200,169,106,.42);
  transform:translateY(-5px)}
.pasos-cuenta span{font-size:12px;color:rgba(232,224,213,.5);
  font-variant-numeric:tabular-nums}

/* El paso que se está leyendo. Un cambio pequeño a propósito: los otros
   tres siguen siendo perfectamente legibles, porque no es un acordeón. */
.paso-e{transition:border-color .5s var(--suave)}
.paso-e.activo{border-color:rgba(200,169,106,.38)}
.paso-e.activo .n{color:var(--gold)}
}

/* ── Movimiento reducido ───────────────────────────────────────────────
   Quien lo pide no quiere «menos»: quiere nada. Las fotos dejan de
   sucederse desde JavaScript; aquí se apaga además el acercamiento, por
   si el temporizador llegara a arrancar.
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero-foto,.hero-foto.visible{animation:none;transform:none;transition:none}
  .ciu-f,.ciu-c:hover .ciu-f{transition:none;transform:scale(1.02)}
  .pasos-cuenta{transition:none}
  .globo-caja canvas{filter:none}
}