:root{
  --c0:#111; --c1:#1C1C1E; --c2:#2C2C2E; --c3:#3A3A3C; --c4:#8E8E93; --c5:#C7C7CC; --c6:#E5E5EA; --c7:#F2F2F7;
  --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.18);
}
*{box-sizing:border-box} body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--c7);
  color:var(--c0)
}
.container{max-width:1160px;margin:0 auto;padding:24px}
.header{position:sticky;top:0;background:rgba(242,242,247,.8);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--c6);z-index:99}
.brand{display:flex;gap:12px;align-items:center;font-weight:700;color:var(--c1)}
.topnav{display:flex;gap:8px}
.pill{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--c6);color:var(--c1);text-decoration:none;transition:transform .15s,background .2s}
.pill:hover{background:#fff;transform:translateY(-1px)}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.btn{border:0;border-radius:12px;padding:10px 16px;cursor:pointer;transition:transform .15s,opacity .2s;box-shadow:var(--shadow);background:var(--c2);color:#fff}
.btn:hover{transform:translateY(-1px)}
.input,select{width:100%;padding:10px 12px;border:1px solid var(--c6);border-radius:12px;background:#fff}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--c6);color:var(--c1);font-size:12px}
.job-card h3{margin:0 0 6px}
.footer{color:var(--c4);text-align:center;padding:24px}
.hero{background:linear-gradient(180deg, #fff, var(--c7));border-radius:16px;padding:28px;margin:16px 0}
.tag{display:inline-block;padding:6px 10px;border:1px solid var(--c5);border-radius:999px;margin:4px;color:var(--c2)}
.wizard{display:flex;gap:10px;margin:16px 0}
.wizard .step{flex:1;padding:10px;border-radius:12px;background:#fff;border:1px solid var(--c6);text-align:center}
.timer{font-variant-numeric:tabular-nums}
.code6{display:flex;gap:8px}
.code6 input{width:44px;height:52px;text-align:center;font-size:22px;border-radius:12px;border:1px solid var(--c6)}

.footer{color:var(--c4);text-align:center;padding:24px}
.footer .copyright{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.footer .social{display:inline-flex;gap:8px;margin-left:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid var(--c6);text-decoration:none;color:var(--c1);font-weight:600}
.icon-btn:hover{background:#fff;transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}

.card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:var(--radius);
  height:100%;
}
.card-link .card{ margin:0; }
.card-link:hover .card{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.20); }
.card-link:focus-visible .card{ outline:2px solid var(--c5); outline-offset:2px; }

.count-box{
  width:120px; height:120px;
  display:flex; align-items:center; justify-content:center; /* centra el número dentro */
  background:transparent;              /* sin fondo */
  border:1.5px solid var(--c5);        /* línea gris */
  color:var(--c1);
  border-radius:16px;
  /* sin sombra para un look más limpio */
  font-size:64px; font-weight:800; line-height:1;
  margin:12px auto 0;                  /* centra el cuadrado */
}

/* Header / Brand */
.brand{display:flex;align-items:center;gap:12px}
.brand a{ text-decoration:none; color:inherit }           /* sin subrayado en logo y título */
.brand .logo-mini{display:inline-flex; width:32px; height:32px; border-radius:8px; overflow:hidden}
.brand .logo-mini img{width:100%; height:100%; object-fit:contain; display:block}
.brand .logo-normal span{font-weight:700; font-size:18px; line-height:1; color:var(--c1)}
.brand .logo-normal:hover span{opacity:.85}

/* (opcional) quita subrayado también en la topnav explícitamente */
.topnav a{ text-decoration:none; color:inherit }


footer .gsqa-footer-powered {
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f5f5f7;     /* look minimal tipo Apple */
  color: #555;
}


/* ===================== */
/* Talent layout (light) */
/* ===================== */

.talent-body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--c7);
  color:var(--c0);
}

.talent-main{
  flex:1;
  padding:24px 16px 32px;
}

/* Hero principal ocupa el ancho del container */
.talent-main .hero{
  max-width:1160px;
  margin:16px auto;
}

/* Layout interno: resumen + lista de jobs */
.layout{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:16px;
}

.layout-sidebar{
  /* ya tiene .card, aquí solo afinamos */
}

/* Lista de vacantes: grid responsivo */
.jobs-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

/* Card de job usando tu card + hover */
.job-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  transition:transform .15s, box-shadow .2s;
}

/* Reutilizamos tu .card-link existente */
.card-link:hover .job-card{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}

/* Etiquetas pequeñas dentro del job */
.job-meta{margin-top:6px;}
.job-meta .badge{margin-right:6px;margin-bottom:4px;}

/* Textos secundarios */
.text-muted, .muted{
  color:var(--c4);
  font-size:0.9rem;
}

/* Breakpoints: tablet / desktop */
@media (min-width:768px){
  .talent-main{
    padding:40px 24px 40px;
  }
  .layout{
    display:grid;
    grid-template-columns: minmax(0,4fr) minmax(0,8fr);
    gap:20px;
    align-items:flex-start;
  }
  .jobs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1024px){
  .jobs-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}


/* ========================= */
/* Hero + tipografía Talent  */
/* ========================= */

.hero-header{
  margin-bottom:16px;
}

.hero-title{
  margin:0;
  font-size:clamp(1.9rem, 3vw, 2.3rem);
  letter-spacing:0.02em;
  font-weight:700;
  color:var(--c0);
}

.hero-subtitle{
  margin:6px 0 0;
  font-size:0.98rem;
  color:var(--c4);
  max-width:40rem;
}

/* Etiqueta "Oportunidades disponibles" */
.label-muted{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--c4);
}

/* Afinar el hero en móvil vs desktop */
@media (max-width:767px){
  .talent-main{
    padding-top:16px;
  }
  .talent-main .hero{
    margin-top:8px;
    padding:20px;
  }
}

@media (min-width:1024px){
  .hero{
    padding:32px;
  }
}