/* Radar I · embudo publico de vacantes.
   Fondo oscuro fijo a proposito: la pagina se abre casi siempre desde un
   anuncio, en un celular, en la calle. Un solo mundo visual, no dos. */

:root{
  --navy:#141A3C;      --navy2:#1E2A5A;
  --indigo:#4F46E5;    --indigo-claro:#7C74F6;
  --menta:#6EE7A0;     --verde:#16A34A;
  --coral:#FF6B6B;
  --papel:#F4F6FB;     --tinta:#101534;
  --gris:#8A93B8;      --linea:rgba(255,255,255,.12);
  --tarjeta:rgba(255,255,255,.055);
  --sombra:0 24px 60px rgba(6,10,30,.45);
  --radio:18px;
  --ancho:1120px;
}

*{box-sizing:border-box}
/* El atributo hidden pierde contra cualquier display de una clase. Sin esta
   regla, ocultar la lista de sugerencias o el bloque del domicilio elegido no
   hace nada y las dos cosas se ven a la vez. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; background:var(--navy); color:#EEF1FA;
  font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3{font-family:Archivo,Inter,sans-serif; font-weight:900; line-height:1.04;
  letter-spacing:-.025em; text-wrap:balance; margin:0}
button,input,textarea,select{font:inherit; color:inherit}
a{color:inherit}

/* ---------------------------------------------------------- el radar */
#radar{position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.55}
.velo{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(79,70,229,.28), transparent 60%),
    linear-gradient(180deg, rgba(20,26,60,.35) 0%, rgba(20,26,60,.88) 55%, var(--navy) 100%);
}

/* ---------------------------------------------------------- barra */
.barra{position:relative; z-index:3; max-width:var(--ancho); margin:0 auto;
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.marca span{font-family:Archivo,sans-serif; font-weight:900; font-size:20px; letter-spacing:.02em}
.marca i{color:var(--coral); font-style:normal; margin-left:5px}
.barra-nota{font-size:13px; color:var(--gris); letter-spacing:.04em; text-transform:uppercase}
@media(max-width:600px){.barra-nota{display:none}}

/* ---------------------------------------------------------- pasos */
main{position:relative; z-index:2; max-width:var(--ancho); margin:0 auto;
  padding:12px 22px 80px}
.paso{display:none; gap:44px; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.paso.vivo{display:grid; animation:entra .5s cubic-bezier(.2,.7,.3,1) both}
.paso.centrado.vivo{display:flex; justify-content:center; padding-top:24px}
@keyframes entra{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@media(max-width:900px){
  .paso.vivo{grid-template-columns:1fr; gap:26px}
}

.ojo{margin:0 0 12px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--menta); font-weight:600}
.ojo b{color:#fff}
.lado h2{font-size:clamp(28px,4.4vw,44px); margin-bottom:14px}
.lado p{color:#C3CAE4; max-width:44ch; margin:0 0 10px}
.nota-privacidad{font-size:13.5px; color:var(--gris)}

/* ---------------------------------------------------------- portada */
.portada{padding-top:26px}
.portada h1{font-size:clamp(38px,7vw,74px)}
.portada h1 em{font-style:normal; color:var(--menta)}
.entrada{margin:20px 0 26px; font-size:clamp(16px,2.1vw,19px); color:#C9D0E8; max-width:46ch}
.letra-chica{font-size:13.5px; color:var(--gris); margin-top:12px}

.ventajas{list-style:none; margin:38px 0 0; padding:0; display:grid; gap:14px}
.ventajas li{display:grid; gap:2px; padding-left:18px; border-left:2px solid var(--indigo)}
.ventajas b{font-size:15px}
.ventajas span{font-size:14px; color:var(--gris)}

.ciudades{background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
  padding:22px; backdrop-filter:blur(14px); margin-top:26px}
.ciudades h2{font-size:17px; font-weight:800; margin-bottom:14px}
.chips-ciudad{display:flex; flex-wrap:wrap; gap:8px}
.chips-ciudad span.c{display:inline-flex; align-items:baseline; gap:6px; padding:7px 12px;
  border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--linea); font-size:13.5px}
.chips-ciudad span.c b{color:var(--menta); font-size:12.5px}
.cargando{color:var(--gris); font-size:14px}

/* ---------------------------------------------------------- tarjeta */
.tarjeta{background:var(--tarjeta); border:1px solid var(--linea); border-radius:22px;
  padding:26px; backdrop-filter:blur(16px); box-shadow:var(--sombra); display:grid; gap:18px}
.tarjeta.sola{max-width:560px; text-align:center; justify-items:center; gap:14px; padding:38px 30px}
.tarjeta.sola h2{font-size:clamp(24px,4vw,34px)}
.tarjeta.sola p{color:#C3CAE4; margin:0; max-width:46ch}
.emoji{font-size:42px; line-height:1}

.campo{display:grid; gap:7px}
.campo>span{font-size:13.5px; font-weight:600; color:#D5DBEF}
.campo>span i{font-style:normal; font-weight:400; color:var(--gris)}
.campo input,.campo textarea,.campo select{
  width:100%; padding:13px 14px; border-radius:12px; background:rgba(9,13,35,.6);
  border:1px solid var(--linea); outline:none; transition:border-color .16s, box-shadow .16s}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--indigo-claro); box-shadow:0 0 0 3px rgba(124,116,246,.22)}
.campo input::placeholder,.campo textarea::placeholder{color:#5F6890}
.campo.mal input{border-color:var(--coral)}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.dos{grid-template-columns:1fr}}

.grupo{border:0; margin:0; padding:0; display:grid; gap:9px}
.grupo legend{padding:0; font-size:13.5px; font-weight:600; color:#D5DBEF}
.opciones{display:flex; flex-wrap:wrap; gap:8px}
.opciones button{padding:9px 14px; border-radius:999px; cursor:pointer; font-size:14px;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  transition:transform .12s, background .16s, border-color .16s}
.opciones button:hover{background:rgba(255,255,255,.1)}
.opciones button:active{transform:scale(.97)}
.opciones button[aria-pressed="true"]{background:var(--indigo); border-color:var(--indigo-claro);
  font-weight:600; box-shadow:0 6px 18px rgba(79,70,229,.35)}

.casilla{display:flex; gap:11px; align-items:flex-start; font-size:14px; color:#C3CAE4;
  cursor:pointer; line-height:1.5}
.casilla input{margin-top:3px; width:18px; height:18px; accent-color:var(--indigo); flex:none}

.resumen-trabajo{background:rgba(9,13,35,.5); border:1px solid var(--linea);
  border-radius:14px; padding:16px; display:grid; gap:9px; font-size:14.5px; color:#C3CAE4}
.resumen-trabajo b{color:#fff}
.resumen-trabajo p{margin:0}

.error{margin:0; color:#FFB4B4; font-size:14px; background:rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.3); border-radius:10px; padding:10px 12px}

/* ---------------------------------------------------------- botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  padding:14px 22px; border-radius:14px; border:1px solid transparent; font-weight:700; font-size:15px;
  background:var(--indigo); color:#fff; text-decoration:none;
  box-shadow:0 10px 26px rgba(79,70,229,.38); transition:transform .14s, box-shadow .18s, background .18s}
.btn:hover{background:var(--indigo-claro); box-shadow:0 14px 34px rgba(124,116,246,.45)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn.grande{padding:17px 30px; font-size:17px}
.btn.fantasma{background:transparent; border-color:var(--linea); box-shadow:none; color:#D5DBEF}
.btn.fantasma:hover{background:rgba(255,255,255,.07)}
.btn .flecha{transition:transform .2s}
.btn:hover .flecha{transform:translateX(4px)}
.btn.brillo{position:relative; overflow:hidden}
.btn.brillo::after{content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:barrido 2.6s ease-in-out infinite}
@keyframes barrido{0%{left:-60%}55%,100%{left:130%}}
.pie{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px}
.pie .btn{flex:0 0 auto}
@media(max-width:520px){.pie{flex-direction:column-reverse} .pie .btn{width:100%}}

.btn.ubicacion{background:rgba(255,255,255,.07); border-color:var(--linea); box-shadow:none;
  width:100%; padding:15px}
.btn.ubicacion:hover{background:rgba(255,255,255,.12)}
.pin{width:12px; height:12px; border-radius:50%; background:var(--menta); position:relative; flex:none}
.pin::after{content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--menta); opacity:.5; animation:latido 1.9s ease-out infinite}
@keyframes latido{0%{transform:scale(.6); opacity:.7} 100%{transform:scale(1.35); opacity:0}}

.separador{display:flex; align-items:center; gap:14px; color:var(--gris); font-size:13px; margin:2px 0}
.separador::before,.separador::after{content:""; flex:1; height:1px; background:var(--linea)}

/* ---------------------------------------------------------- sugerencias */
.sugerencias{list-style:none; margin:-8px 0 0; padding:6px; display:grid; gap:2px;
  background:rgba(9,13,35,.92); border:1px solid var(--linea); border-radius:12px; max-height:260px;
  overflow:auto}
.sugerencias li{padding:11px 12px; border-radius:9px; cursor:pointer; font-size:14.5px}
.sugerencias li:hover,.sugerencias li[aria-selected="true"]{background:rgba(79,70,229,.3)}
.sugerencias li small{display:block; color:var(--gris); font-size:12.5px}
.elegido{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:4px 14px; padding:15px; background:rgba(110,231,160,.1);
  border:1px solid rgba(110,231,160,.32); border-radius:12px}
.elegido b{grid-area:1 / 1; font-size:14.5px; min-width:0}
.elegido span{grid-area:2 / 1; color:var(--gris); font-size:13px; min-width:0}
.elegido .cambiar{grid-area:1 / 2 / 3 / 3; align-self:center; white-space:nowrap}
.elegido .cambiar{background:none; border:0; color:var(--menta); cursor:pointer;
  font-size:13.5px; font-weight:600; text-decoration:underline}

/* ---------------------------------------------------------- dias */
.dias{display:grid; gap:9px}
.dia{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:11px 13px; border-radius:12px; background:rgba(9,13,35,.45); border:1px solid var(--linea);
  transition:border-color .16s, background .16s}
.dia.on{border-color:rgba(110,231,160,.4); background:rgba(110,231,160,.08)}
.dia label{display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; font-size:14.5px}
.dia input[type=checkbox]{width:18px; height:18px; accent-color:var(--verde)}
.dia .horas{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--gris);
  justify-self:end; opacity:.35; pointer-events:none; transition:opacity .16s}
.dia.on .horas{opacity:1; pointer-events:auto}
.dia select{padding:7px 9px; border-radius:9px; background:rgba(9,13,35,.8);
  border:1px solid var(--linea); font-size:14px}
@media(max-width:520px){
  .dia{grid-template-columns:1fr; gap:9px}
  .dia .horas{justify-self:start}
}

/* ---------------------------------------------------------- calculando */
.calculando{text-align:center; display:grid; gap:14px; justify-items:center; padding:60px 0}
.calculando h2{font-size:clamp(22px,3.6vw,30px)}
.calculando p{color:var(--gris); margin:0}
.pulso{display:flex; gap:10px}
.pulso span{width:13px; height:13px; border-radius:50%; background:var(--indigo-claro);
  animation:salta 1.05s ease-in-out infinite}
.pulso span:nth-child(2){animation-delay:.16s; background:var(--menta)}
.pulso span:nth-child(3){animation-delay:.32s; background:var(--coral)}
@keyframes salta{0%,80%,100%{transform:translateY(0); opacity:.45} 40%{transform:translateY(-13px); opacity:1}}

/* ---------------------------------------------------------- la oferta */
.oferta{width:100%; max-width:620px; display:grid; gap:20px; justify-items:center; text-align:center}
.sello{display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  background:rgba(110,231,160,.14); border:1px solid rgba(110,231,160,.35);
  color:var(--menta); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.oferta h2{font-size:clamp(26px,4.6vw,40px)}
.oferta h2 em{font-style:normal; color:var(--menta)}

.dinero{width:100%; padding:32px 26px; border-radius:26px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#1F2A66 0%,#2A1F6B 55%,#141A3C 100%);
  border:1px solid rgba(124,116,246,.4); box-shadow:0 26px 70px rgba(79,70,229,.35)}
.dinero::before{content:""; position:absolute; inset:-40% -20% auto; height:80%;
  background:radial-gradient(closest-side, rgba(110,231,160,.28), transparent);
  animation:flota 7s ease-in-out infinite alternate}
@keyframes flota{from{transform:translate(-8%,0)} to{transform:translate(8%,10%)}}
.dinero .etiqueta{position:relative; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#B9C1E4; margin:0 0 6px}
.dinero .monto{position:relative; font-family:Archivo,sans-serif; font-weight:900;
  font-size:clamp(46px,11vw,78px); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:#fff}
.dinero .monto sup{font-size:.42em; vertical-align:super; margin-right:4px; color:var(--menta)}
.dinero .porMes{position:relative; margin:8px 0 0; color:#C9D0E8; font-size:15px}

.cifras{width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.cifra{background:var(--tarjeta); border:1px solid var(--linea); border-radius:16px; padding:18px 12px;
  display:grid; gap:4px; animation:sube .5s cubic-bezier(.2,.7,.3,1) both}
.cifra:nth-child(2){animation-delay:.09s}
.cifra:nth-child(3){animation-delay:.18s}
@keyframes sube{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.cifra b{font-family:Archivo,sans-serif; font-weight:900; font-size:clamp(24px,5vw,32px);
  font-variant-numeric:tabular-nums}
.cifra span{font-size:12.5px; color:var(--gris); line-height:1.35}
@media(max-width:520px){.cifras{grid-template-columns:1fr; gap:9px}
  .cifra{grid-template-columns:auto 1fr; align-items:center; gap:12px; text-align:left; padding:14px}}

.detalle-oferta{width:100%; display:grid; gap:9px; text-align:left;
  background:rgba(9,13,35,.45); border:1px solid var(--linea); border-radius:16px; padding:18px}
.detalle-oferta li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:#C3CAE4}
.detalle-oferta ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.detalle-oferta .tic{color:var(--menta); font-weight:700; flex:none}
.pregunta-interes{font-size:17px; font-weight:600; margin:6px 0 0}
.dos-botones{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%}
@media(max-width:520px){.dos-botones{flex-direction:column} .dos-botones .btn{width:100%}}

/* ---------------------------------------------------------- caminos */
.caminos{display:grid; gap:12px; width:100%; margin-top:6px}
.camino{text-align:left; padding:20px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--linea); display:grid; gap:5px;
  transition:transform .14s, border-color .16s, background .16s}
.camino:hover{background:rgba(255,255,255,.09); border-color:var(--indigo-claro); transform:translateY(-2px)}
.camino b{font-size:16.5px}
.camino span{font-size:14px; color:var(--gris)}
.camino i{font-style:normal; font-size:13.5px; color:var(--menta); font-weight:600; margin-top:4px}
.camino.principal{background:linear-gradient(140deg,rgba(79,70,229,.35),rgba(110,231,160,.12));
  border-color:rgba(124,116,246,.5)}

/* ---------------------------------------------------------- pie */
.pie-sitio{position:relative; z-index:2; max-width:var(--ancho); margin:0 auto;
  padding:22px; display:flex; justify-content:space-between; gap:12px;
  border-top:1px solid var(--linea); font-size:13px; color:var(--gris)}
.pie-sitio a{color:var(--gris)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  #radar{display:none}
}