
/* BolsaJob V14: hero horizontal + banners simétricos */
:root{
  --bj-bg:#06111f;
  --bj-card:#11243a;
  --bj-card-2:#0b1b2d;
  --bj-line:#2b4867;
  --bj-text:#eaf4ff;
  --bj-muted:#b7c9db;
  --bj-cyan:#42e6c8;
  --bj-blue:#7ee7f2;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 70% 10%, rgba(24,110,96,.28), transparent 34rem),
    linear-gradient(135deg,#06111f 0%,#07242b 58%,#0c302d 100%) !important;
}
.topbar-v14{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(12px);
}
.public-v14{
  width:min(1500px,96vw);
  margin-inline:auto;
}
.hero-v14{
  width:100%;
  min-height:0;
  margin:clamp(34px,6vh,76px) auto 24px;
  display:grid;
  grid-template-columns:minmax(520px,1.1fr) minmax(420px,.9fr);
  gap:34px;
  align-items:stretch;
}
.hero-v14-copy,
.hero-v14-side{
  background:rgba(17,36,58,.93);
  border:1px solid rgba(126,231,242,.20);
  box-shadow:0 18px 70px rgba(0,0,0,.25);
  border-radius:28px;
}
.hero-v14-copy{
  padding:clamp(34px,4vw,58px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-v14-copy .eyebrow{
  display:block;
  font-size:clamp(12px,1.2vw,16px);
  letter-spacing:.20em;
  line-height:1.4;
  margin-bottom:18px;
  color:#9fe8f4;
}
.hero-v14-copy h1{
  max-width:980px;
  margin:0;
  font-size:clamp(42px,5.2vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.hero-v14-copy p{
  max-width:860px;
  margin:22px 0 0;
  color:var(--bj-muted);
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.65;
}
.hero-v14 .hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}
.hero-v14 .primary,
.hero-v14 .secondary,
.mini-btn{
  text-decoration:none;
  border-radius:999px;
  font-weight:900;
}
.hero-v14 .secondary{
  border:1px solid rgba(234,244,255,.40);
}
.trust-strip-v14{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.trust-strip-v14 span{
  white-space:nowrap;
}
.hero-v14-side{
  padding:clamp(24px,3vw,40px);
  display:grid;
  grid-template-rows:minmax(280px,1fr) auto;
  gap:22px;
  align-items:center;
}
.logo-panel{
  width:100%;
  min-height:300px;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 38%),
    #04080d;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.logo-panel img{
  width:min(540px,92%);
  max-height:360px;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.55));
}
.signal-grid-v14{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.signal-grid-v14 div{
  border:1px solid rgba(126,231,242,.22);
  background:rgba(7,17,31,.58);
  border-radius:16px;
  padding:16px;
}
.signal-grid-v14 strong{
  display:block;
  color:var(--bj-cyan);
  font-size:clamp(18px,1.5vw,24px);
  margin-bottom:6px;
}
.signal-grid-v14 span{
  display:block;
  color:var(--bj-text);
  font-size:clamp(12px,1vw,14px);
  line-height:1.35;
  font-weight:800;
}
.feature-row-v14{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:24px auto;
}
.feature-row-v14 article{
  min-height:0;
}
.job-banner-section{
  width:100%;
  margin:24px auto;
  background:rgba(17,36,58,.82);
  border:1px solid rgba(126,231,242,.20);
  border-radius:28px;
  padding:clamp(22px,3vw,34px);
  box-shadow:0 18px 70px rgba(0,0,0,.20);
}
.banner-head{
  margin-bottom:18px;
}
.banner-head p{
  margin:8px 0 0;
  color:var(--bj-muted);
}
.job-banner-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.job-banner-card{
  min-height:210px;
  border:1px solid rgba(126,231,242,.18);
  background:linear-gradient(180deg,rgba(10,28,46,.98),rgba(7,17,31,.96));
  border-radius:22px;
  overflow:hidden;
  display:grid;
  grid-template-columns:42% 58%;
  color:var(--bj-text);
  text-decoration:none;
  transform:translateY(0);
  transition:transform .2s ease,border-color .2s ease,opacity .35s ease;
}
.job-banner-card:hover{
  transform:translateY(-3px);
  border-color:rgba(66,230,200,.55);
}
.job-banner-card img{
  width:100%;
  height:100%;
  min-height:210px;
  object-fit:cover;
  background:#03070c;
}
.job-banner-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.job-banner-kicker{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:#9fe8f4;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.job-banner-card h3{
  margin:0;
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.job-banner-card p{
  color:var(--bj-muted);
  margin:0;
  font-size:14px;
  line-height:1.45;
}
.job-banner-cta{
  margin-top:auto;
  color:var(--bj-cyan);
  font-weight:900;
}
.job-banner-empty{
  grid-column:1/-1;
  border:1px dashed rgba(126,231,242,.25);
  border-radius:20px;
  color:var(--bj-muted);
  padding:26px;
  background:rgba(7,17,31,.45);
}
.job-banner-grid.is-rotating .job-banner-card{
  opacity:.18;
}
.public-form-panel,
.contact-panel,
.official-strip{
  width:100%;
}
@media (max-width:1180px){
  .hero-v14{grid-template-columns:1fr}
  .hero-v14-side{grid-template-rows:auto auto}
  .logo-panel{min-height:250px}
  .job-banner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .public-v14{width:min(100% - 24px,1500px)}
  .hero-v14{margin-top:22px;gap:16px}
  .hero-v14-copy{padding:26px}
  .hero-v14-copy h1{font-size:clamp(36px,12vw,52px)}
  .feature-row-v14,
  .job-banner-grid,
  .signal-grid-v14{grid-template-columns:1fr}
  .job-banner-card{grid-template-columns:1fr}
  .job-banner-card img{height:190px;min-height:190px}
}


/* V15: banner horizontal full width + carrusel 45s */
.job-banner-section{
  overflow:hidden;
}
.job-banner-grid{
  display:block;
  width:100%;
  min-height:clamp(260px,26vw,390px);
}
.job-banner-slider{
  position:relative;
  width:100%;
}
.job-banner-card{
  width:100%;
  min-height:clamp(260px,26vw,390px);
  border:1px solid rgba(126,231,242,.22);
  border-radius:24px;
  overflow:hidden;
  display:block;
  position:relative;
  color:var(--bj-text);
  text-decoration:none;
  background:#07111f;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.job-banner-card:hover{
  transform:none;
  border-color:rgba(66,230,200,.55);
}
.job-banner-card img,
.job-banner-full-img{
  display:block;
  width:100%;
  height:clamp(260px,26vw,390px);
  min-height:0;
  object-fit:cover;
  object-position:center center;
  background:#03070c;
}
.job-banner-body{
  position:absolute;
  left:clamp(16px,2vw,28px);
  right:clamp(16px,2vw,28px);
  bottom:clamp(16px,2vw,28px);
  max-width:min(620px,86%);
  padding:clamp(14px,2vw,22px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(4,10,18,.82),rgba(9,31,46,.66));
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.job-banner-kicker{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:#9fe8f4;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.job-banner-card h3{
  margin:0;
  font-size:clamp(22px,2.5vw,36px);
  line-height:1;
  letter-spacing:-.035em;
}
.job-banner-card p{
  color:var(--bj-muted);
  margin:0;
  font-size:clamp(13px,1.2vw,16px);
  line-height:1.45;
}
.job-banner-cta{
  margin-top:4px;
  color:var(--bj-cyan);
  font-weight:900;
}
.job-banner-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.job-banner-dots{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.job-banner-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(126,231,242,.55);
  background:rgba(255,255,255,.10);
}
.job-banner-dot.is-active{
  width:28px;
  background:var(--bj-cyan);
  border-color:var(--bj-cyan);
}
.job-banner-timer{
  color:var(--bj-muted);
  font-size:12px;
  font-weight:800;
}
.job-banner-grid.is-rotating .job-banner-card{
  opacity:.18;
}
@media (max-width:760px){
  .job-banner-grid{min-height:280px}
  .job-banner-card img,
  .job-banner-full-img,
  .job-banner-card{
    height:auto;
    min-height:280px;
  }
  .job-banner-body{
    max-width:calc(100% - 24px);
    left:12px;
    right:12px;
    bottom:12px;
  }
  .job-banner-card p{display:none}
}


/* V17: overlay compacto para no tapar el arte del banner */
.job-banner-section .section-head.banner-head{
  align-items:flex-start;
}
.job-banner-card.job-banner-wide,
.job-banner-card{
  min-height:clamp(285px,28vw,420px);
}
.job-banner-card img,
.job-banner-full-img{
  height:clamp(285px,28vw,420px);
  object-fit:cover;
  object-position:center center;
}
.job-banner-body{
  left:clamp(18px,2vw,28px);
  right:auto;
  bottom:clamp(16px,1.8vw,24px);
  width:min(360px,34%);
  max-width:360px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(4,10,18,.78),rgba(9,31,46,.62));
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  gap:6px;
}
.job-banner-kicker{
  font-size:10px;
  line-height:1.2;
  letter-spacing:.07em;
  gap:6px;
}
.job-banner-card h3{
  font-size:clamp(20px,1.9vw,30px);
  line-height:1.03;
  letter-spacing:-.03em;
}
.job-banner-card p{
  font-size:clamp(12px,1vw,14px);
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.job-banner-cta{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:0;
  color:var(--bj-cyan);
  font-size:14px;
  font-weight:950;
}
.job-banner-card:hover .job-banner-cta{
  color:#ffffff;
  text-decoration:underline;
}
.job-banner-controls{
  margin-top:12px;
}
@media (min-width:1181px){
  .job-banner-section{
    padding-bottom:28px;
  }
}
@media (max-width:900px){
  .job-banner-body{
    width:min(320px,58%);
    max-width:320px;
    padding:12px 14px;
  }
  .job-banner-card h3{
    font-size:22px;
  }
}
@media (max-width:760px){
  .job-banner-card.job-banner-wide,
  .job-banner-card,
  .job-banner-card img,
  .job-banner-full-img{
    min-height:300px;
    height:300px;
  }
  .job-banner-body{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    max-width:none;
    padding:12px 14px;
  }
  .job-banner-card p{
    display:none;
  }
}


/* V19: reduce espacio superior y mejora vista responsive/móvil */
html, body{
  overflow-x:hidden;
}

/* Corrige el padding heredado de public.css: main{padding:40px...} */
main.public-v14{
  width:min(1500px,96vw) !important;
  max-width:min(1500px,96vw) !important;
  margin:0 auto !important;
  padding:clamp(6px,1vw,12px) 0 18px !important;
}

/* Cuando la sección de banners es la primera, queda pegada al header sin espacio vacío */
.public-v14 > .job-banner-section:first-child{
  margin-top:clamp(6px,1vw,12px) !important;
}

/* Compacta la caja superior de banners */
.job-banner-section{
  margin:clamp(10px,1.4vw,18px) auto 24px !important;
  padding:clamp(18px,2.4vw,28px) !important;
}
.job-banner-section .section-head.banner-head{
  margin-bottom:clamp(12px,1.6vw,18px) !important;
  padding-bottom:clamp(12px,1.4vw,16px) !important;
}
.job-banner-section .section-head.banner-head h2{
  font-size:clamp(24px,2.2vw,34px);
}
.job-banner-section .section-head.banner-head p{
  font-size:clamp(14px,1.15vw,16px);
}

/* Banner panorámico 1920x600: relación 3.2:1 */
.job-banner-grid{
  min-height:auto !important;
}
.job-banner-card.job-banner-wide,
.job-banner-card{
  aspect-ratio:3.2 / 1;
  min-height:0 !important;
  height:auto !important;
}
.job-banner-card img,
.job-banner-full-img{
  width:100%;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:3.2 / 1;
  object-fit:cover;
  object-position:center center;
}

/* Overlay más liviano para no tapar la creatividad */
.job-banner-body{
  left:clamp(12px,1.8vw,24px) !important;
  bottom:clamp(10px,1.4vw,18px) !important;
  width:min(330px,31%) !important;
  max-width:330px !important;
  padding:clamp(10px,1.2vw,14px) clamp(12px,1.4vw,16px) !important;
  border-radius:16px !important;
}
.job-banner-kicker{
  font-size:clamp(8px,.8vw,10px) !important;
}
.job-banner-card h3{
  font-size:clamp(18px,1.7vw,28px) !important;
}
.job-banner-card p{
  font-size:clamp(11px,.95vw,13px) !important;
  -webkit-line-clamp:2;
}
.job-banner-cta{
  font-size:clamp(12px,.95vw,14px) !important;
}

@media (max-width:1180px){
  main.public-v14{
    width:94vw !important;
    max-width:94vw !important;
  }
  .public-v14 > .job-banner-section:first-child{
    margin-top:8px !important;
  }
}

@media (max-width:900px){
  .topbar.topbar-v14{
    padding:10px 4vw !important;
    gap:10px;
  }
  .brand-top img{
    width:40px !important;
    height:40px !important;
    border-radius:12px !important;
  }
  .brand-top span{
    font-size:17px !important;
  }
  .topbar nav{
    gap:10px !important;
    overflow-x:auto;
    max-width:62vw;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{
    font-size:12px !important;
    white-space:nowrap;
  }

  .job-banner-section{
    border-radius:22px !important;
    padding:18px !important;
  }
  .job-banner-section .section-head.banner-head{
    display:grid !important;
    grid-template-columns:1fr;
    gap:12px;
  }
  .job-banner-section .mini-btn{
    width:max-content;
    padding:9px 12px;
    font-size:13px;
  }

  .job-banner-card.job-banner-wide,
  .job-banner-card{
    aspect-ratio:16 / 9;
  }
  .job-banner-card img,
  .job-banner-full-img{
    aspect-ratio:16 / 9;
    object-position:center center;
  }
  .job-banner-body{
    width:min(300px,58%) !important;
    max-width:300px !important;
    padding:10px 12px !important;
  }
  .job-banner-card h3{
    font-size:20px !important;
  }
  .job-banner-card p{
    display:-webkit-box !important;
    font-size:12px !important;
    -webkit-line-clamp:2;
  }
}

@media (max-width:640px){
  main.public-v14{
    width:100% !important;
    max-width:100% !important;
    padding:6px 10px 16px !important;
  }
  .public-v14 > .job-banner-section:first-child{
    margin-top:6px !important;
  }
  .topbar.topbar-v14{
    position:sticky;
    padding:8px 12px !important;
  }
  .topbar nav{
    max-width:52vw;
    gap:8px !important;
  }
  .topbar nav a{
    font-size:11px !important;
  }
  .nav-cta{
    padding:8px 10px !important;
  }

  .job-banner-section{
    margin:6px auto 18px !important;
    padding:14px !important;
    border-radius:20px !important;
  }
  .job-banner-section .section-head.banner-head h2{
    font-size:22px;
    line-height:1.1;
  }
  .job-banner-section .section-head.banner-head p{
    font-size:13px;
    line-height:1.45;
  }

  /* En celular se prioriza que el banner se vea proporcionado y legible */
  .job-banner-card.job-banner-wide,
  .job-banner-card{
    aspect-ratio:4 / 3;
    border-radius:18px !important;
  }
  .job-banner-card img,
  .job-banner-full-img{
    aspect-ratio:4 / 3;
    object-position:center center;
  }
  .job-banner-body{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    width:auto !important;
    max-width:none !important;
    padding:10px 12px !important;
    border-radius:14px !important;
  }
  .job-banner-kicker{
    font-size:8px !important;
    gap:5px !important;
  }
  .job-banner-card h3{
    font-size:18px !important;
  }
  .job-banner-card p{
    display:none !important;
  }
  .job-banner-controls{
    margin-top:10px !important;
    align-items:flex-start;
  }
  .job-banner-timer{
    font-size:10px !important;
    text-align:right;
  }
  .hero-v14{
    margin-top:14px !important;
  }
}

@media (max-width:420px){
  .brand-top span{
    font-size:15px !important;
  }
  .brand-top img{
    width:36px !important;
    height:36px !important;
  }
  .topbar nav{
    max-width:48vw;
  }
  .job-banner-card.job-banner-wide,
  .job-banner-card,
  .job-banner-card img,
  .job-banner-full-img{
    aspect-ratio:1 / 1;
  }
}


/* ==========================================================
   V22 BolsaJob: actualización visual según diseño sugerido
   - Banner con tarjeta transparente y borde legible
   - Sin texto de rotación automática
   - Indicadores pequeños e imperceptibles
   - Secciones central/contacto/footer con fondo blanco y contraste
   ========================================================== */
:root{
  --bj22-red:#e30613;
  --bj22-red-dark:#b9000b;
  --bj22-navy:#071c36;
  --bj22-navy-2:#0b2a4d;
  --bj22-ink:#0d1b2e;
  --bj22-muted:#53657a;
  --bj22-soft:#f5f7fb;
  --bj22-line:#dce4ee;
  --bj22-cyan:#77e9f4;
  --bj22-shadow:0 18px 45px rgba(12,31,55,.12);
}

body{
  background:#ffffff !important;
  color:var(--bj22-ink) !important;
}

a{ text-decoration:none; }

.topbar.topbar-v14{
  width:min(1480px,96vw) !important;
  margin:12px auto 0 !important;
  padding:12px clamp(18px,3vw,44px) !important;
  border:1px solid rgba(13,27,46,.08) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  color:var(--bj22-ink) !important;
  box-shadow:0 12px 34px rgba(7,28,54,.10) !important;
}
.topbar.topbar-v14 .brand-top{ color:var(--bj22-ink) !important; }
.topbar.topbar-v14 .brand-top span{
  font-size:clamp(20px,2vw,29px) !important;
  color:var(--bj22-navy) !important;
  letter-spacing:-.04em;
}
.topbar.topbar-v14 .brand-top span::first-letter{ color:var(--bj22-navy); }
.topbar.topbar-v14 nav{ gap:clamp(14px,2vw,28px) !important; }
.topbar.topbar-v14 nav a{
  color:var(--bj22-ink) !important;
  font-weight:850 !important;
  font-size:14px !important;
  padding:10px 0;
  position:relative;
}
.topbar.topbar-v14 nav a[href="#inicio"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:3px;
  border-radius:999px;
  background:var(--bj22-red);
}
.topbar.topbar-v14 .nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px !important;
  border-radius:7px !important;
  color:#fff !important;
  background:var(--bj22-navy) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 22px rgba(7,28,54,.20) !important;
}
.topbar.topbar-v14 .nav-cta::before{ content:"▣"; font-size:13px; opacity:.8; }

main.public-v14{
  width:min(1480px,96vw) !important;
  max-width:min(1480px,96vw) !important;
  padding:0 0 20px !important;
}

/* Banner superior */
.job-banner-section{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  margin:8px auto 14px !important;
}
.banner-head-hidden{
  display:none !important;
}
.job-banner-card.job-banner-wide,
.job-banner-card{
  aspect-ratio:3.66 / 1 !important;
  border-radius:18px !important;
  border:1px solid rgba(7,94,110,.38) !important;
  box-shadow:0 18px 50px rgba(7,28,54,.13) !important;
  overflow:hidden !important;
  background:#fff !important;
}
.job-banner-card img,
.job-banner-full-img{
  object-fit:cover !important;
  object-position:center center !important;
}

/* Tarjeta Postula: transparente, con marco y contraste */
.job-banner-body{
  left:clamp(22px,3vw,44px) !important;
  bottom:clamp(16px,2.2vw,30px) !important;
  top:auto !important;
  width:min(315px,24%) !important;
  max-width:315px !important;
  padding:clamp(16px,1.8vw,24px) !important;
  border-radius:14px !important;
  border:1.6px solid rgba(255,255,255,.72) !important;
  background:linear-gradient(135deg,rgba(8,16,30,.60),rgba(21,35,52,.50)) !important;
  -webkit-backdrop-filter:blur(10px) saturate(125%) !important;
  backdrop-filter:blur(10px) saturate(125%) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.job-banner-kicker{
  color:#8ff7ff !important;
  font-size:clamp(8px,.75vw,10px) !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
}
.job-banner-card h3{
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45) !important;
  font-size:clamp(18px,1.55vw,29px) !important;
  line-height:1.05 !important;
}
.job-banner-card p{
  color:rgba(255,255,255,.84) !important;
  text-shadow:0 1px 8px rgba(0,0,0,.35) !important;
  font-size:clamp(11px,.88vw,13px) !important;
}
.job-banner-cta{
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:rgba(255,255,255,.08) !important;
  border-radius:6px !important;
  padding:7px 16px !important;
  margin-top:6px !important;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.job-banner-card:hover .job-banner-cta{
  text-decoration:none !important;
  background:rgba(255,255,255,.16) !important;
}

/* Indicadores discretos, no rectángulos rojos */
.job-banner-controls{
  justify-content:center !important;
  margin-top:6px !important;
  min-height:10px !important;
}
.job-banner-dots{
  gap:5px !important;
  justify-content:center !important;
  opacity:.35;
}
.job-banner-dot{
  width:5px !important;
  height:5px !important;
  min-width:5px !important;
  min-height:5px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:0 !important;
  background:#a8b4c2 !important;
  box-shadow:none !important;
}
.job-banner-dot.is-active{
  width:13px !important;
  border-radius:999px !important;
  background:#11243a !important;
}
.job-banner-timer{ display:none !important; }

/* Sección institucional central */
.hero-v14{
  margin:14px auto 8px !important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.hero-v14-copy,
.hero-v14-side{
  border-radius:12px !important;
  box-shadow:var(--bj22-shadow) !important;
}
.hero-v14-copy{
  background:linear-gradient(135deg,#071c36 0%,#08294f 62%,#09243f 100%) !important;
  border:1px solid rgba(119,233,244,.20) !important;
  padding:clamp(28px,3vw,44px) !important;
}
.hero-v14-copy .eyebrow{
  color:#87edf7 !important;
  font-size:12px !important;
  letter-spacing:.22em !important;
}
.hero-v14-copy h1{
  color:#fff !important;
  font-size:clamp(28px,3.05vw,44px) !important;
  line-height:1.05 !important;
  max-width:780px !important;
}
.hero-v14-copy p{
  color:rgba(255,255,255,.80) !important;
  font-size:clamp(14px,1.05vw,16px) !important;
  line-height:1.62 !important;
  max-width:850px !important;
}
.hero-v14 .hero-actions .primary,
.hero-v14 .hero-actions .secondary{
  border-radius:6px !important;
  padding:13px 18px !important;
  font-weight:950 !important;
}
.hero-v14 .hero-actions .primary{
  background:var(--bj22-red) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(227,6,19,.18) !important;
}
.hero-v14 .hero-actions .secondary{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.55) !important;
}
.trust-strip-v14 span{
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:999px !important;
  padding:8px 13px !important;
}
.hero-v14-side{
  background:#fff !important;
  border:1px solid rgba(13,27,46,.08) !important;
  padding:clamp(22px,2.5vw,34px) !important;
  grid-template-rows:auto auto !important;
}
.logo-panel{
  min-height:clamp(120px,13vw,170px) !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#090e16,#111b2a 70%,#06090e) !important;
  border:1px solid rgba(0,0,0,.06) !important;
}
.logo-panel img{ width:min(420px,84%) !important; max-height:150px !important; }
.signal-grid-v14{ gap:14px !important; }
.signal-grid-v14 div{
  background:#ffffff !important;
  border:1px solid var(--bj22-line) !important;
  border-radius:10px !important;
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:14px;
  padding:16px 18px !important;
  box-shadow:0 10px 28px rgba(13,27,46,.06) !important;
}
.signal-grid-v14 div::before{
  content:"☷";
  color:var(--bj22-navy);
  font-size:28px;
  line-height:1;
}
.signal-grid-v14 div:nth-child(2)::before{ content:"◇"; }
.signal-grid-v14 div:nth-child(3)::before{ content:"♙"; }
.signal-grid-v14 div:nth-child(4)::before{ content:"◎"; }
.signal-grid-v14 strong{
  color:var(--bj22-red) !important;
  font-size:17px !important;
  grid-column:2;
  margin:0 !important;
}
.signal-grid-v14 span{
  color:var(--bj22-ink) !important;
  font-weight:850 !important;
  grid-column:2;
  font-size:13px !important;
}

/* Secciones inferiores */
.feature-row-v14{
  display:none !important;
}
.panel,
.contact-panel,
.official-strip{
  background:#fff !important;
  color:var(--bj22-ink) !important;
  border:1px solid rgba(13,27,46,.08) !important;
  border-radius:16px !important;
  box-shadow:var(--bj22-shadow) !important;
}
.panel{ padding:26px !important; }
.contact-panel{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:26px;
  align-items:start;
  margin-top:10px !important;
}
.contact-panel .section-head{
  display:block !important;
  border-bottom:0 !important;
  border-right:1px solid var(--bj22-line) !important;
  padding:12px 24px 12px 0 !important;
  margin:0 !important;
}
.contact-panel .eyebrow,
.official-strip .eyebrow{
  color:var(--bj22-red) !important;
  letter-spacing:.22em !important;
}
.contact-panel h2,
.official-strip h3,
.panel h2{
  color:var(--bj22-ink) !important;
}
.contact-panel h2::after,
.official-strip h3::after,
.panel h2::after{
  background:var(--bj22-red) !important;
}
.contact-email{
  display:flex !important;
  margin-top:30px;
  white-space:normal !important;
  color:var(--bj22-ink) !important;
  font-weight:850 !important;
}
.contact-email::before{ content:"✉"; margin-right:10px; font-size:20px; }
.contact-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px 20px !important;
}
.form-grid label,
.contact-grid label{
  color:var(--bj22-ink) !important;
  font-weight:850 !important;
}
input,select,textarea{
  background:#fff !important;
  color:var(--bj22-ink) !important;
  border:1px solid #b9c5d4 !important;
  border-radius:7px !important;
  box-shadow:none !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--bj22-red) !important;
  box-shadow:0 0 0 3px rgba(227,6,19,.10) !important;
}
.check{
  background:#fff !important;
  border:0 !important;
  padding:4px 0 !important;
  color:var(--bj22-ink) !important;
}
.actions{ justify-content:flex-end; }
button.primary,.primary,[type="submit"]{
  background:var(--bj22-red) !important;
  color:#fff !important;
  border-radius:5px !important;
  box-shadow:0 12px 22px rgba(227,6,19,.16) !important;
}
button.primary:hover,.primary:hover,[type="submit"]:hover{
  background:var(--bj22-red-dark) !important;
}
.official-strip{
  background:#fff !important;
  grid-template-columns:1fr auto auto !important;
  margin-top:14px !important;
}
.official-strip p{ color:#7c8ba0 !important; }
.official-strip a{
  background:#f7f9fc !important;
  color:var(--bj22-ink) !important;
  border:1px solid rgba(13,27,46,.08) !important;
}

/* Footer blanco con crédito centrado */
footer.footer-v22,
.footer-v22{
  width:min(1360px,92vw) !important;
  max-width:min(1360px,92vw) !important;
  margin:14px auto 36px !important;
  background:#fff !important;
  color:var(--bj22-ink) !important;
  border:1px solid rgba(13,27,46,.08) !important;
  border-radius:16px !important;
  box-shadow:var(--bj22-shadow) !important;
  padding:20px 34px !important;
  display:block !important;
}
.footer-main{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  gap:18px;
  padding:0 0 14px;
  border-bottom:1px solid var(--bj22-line);
  color:var(--bj22-ink) !important;
  font-weight:850;
}
.footer-main span,
.footer-main a{
  color:var(--bj22-ink) !important;
  text-align:center;
  font-weight:850;
}
.footer-credit{
  color:#27405d !important;
  font-size:14px;
  text-align:center;
  padding-top:14px;
}

@media(max-width:1180px){
  .hero-v14{ grid-template-columns:1fr !important; }
  .contact-panel{ grid-template-columns:1fr !important; }
  .contact-panel .section-head{ border-right:0 !important; border-bottom:1px solid var(--bj22-line) !important; padding:0 0 18px !important; }
}
@media(max-width:900px){
  .topbar.topbar-v14{ align-items:flex-start !important; }
  .topbar.topbar-v14 nav{ max-width:100% !important; }
  .job-banner-card.job-banner-wide,.job-banner-card{ aspect-ratio:16/9 !important; }
  .job-banner-body{ width:min(330px,52%) !important; }
}
@media(max-width:640px){
  .topbar.topbar-v14{ width:calc(100% - 20px) !important; margin-top:8px !important; }
  main.public-v14{ width:calc(100% - 20px) !important; max-width:calc(100% - 20px) !important; padding:0 0 16px !important; }
  .job-banner-card.job-banner-wide,.job-banner-card{ aspect-ratio:4/3 !important; }
  .job-banner-body{ width:auto !important; left:12px !important; right:12px !important; max-width:none !important; }
  .hero-v14-copy h1{ font-size:30px !important; }
  .signal-grid-v14,.contact-grid{ grid-template-columns:1fr !important; }
  .footer-main{ grid-template-columns:1fr; text-align:center; gap:10px; }
}

/* =========================================================
   V26 — Banner principal 3:1 completo
   Ajuste solicitado: el espacio del carrusel debe respetar
   la proporción real del arte adjunto 2048x682 aprox. (3:1)
   para que no se corte la información inferior ni lateral.
   ========================================================= */
.public-v14 > .job-banner-section:first-child,
.job-banner-section{
  width:100% !important;
  max-width:1310px !important;
  margin:14px auto 24px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.job-banner-section .section-head.banner-head,
.job-banner-section .banner-head-hidden{
  display:none !important;
}

.job-banner-grid,
.job-banner-slider{
  width:100% !important;
  max-width:1310px !important;
  margin:0 auto !important;
  min-height:0 !important;
  height:auto !important;
  background:#fff !important;
  border-radius:14px !important;
  overflow:visible !important;
}

.job-banner-card.job-banner-wide,
.job-banner-card{
  width:100% !important;
  max-width:1310px !important;
  aspect-ratio:3 / 1 !important;
  height:auto !important;
  min-height:430px !important;
  max-height:440px !important;
  display:block !important;
  position:relative !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(10,47,87,.10) !important;
  box-shadow:0 10px 26px rgba(16,24,32,.08) !important;
}

.job-banner-card img,
.job-banner-full-img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:3 / 1 !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
}

/* Overlay transparente sin tapar el arte, siguiendo el ajuste previo */
.job-banner-body{
  left:clamp(16px,3.2vw,40px) !important;
  bottom:clamp(22px,4.2vw,48px) !important;
  width:min(315px,24%) !important;
  max-width:315px !important;
  padding:clamp(14px,1.5vw,18px) clamp(16px,1.8vw,20px) !important;
  border-radius:16px !important;
  color:#fff !important;
  background:linear-gradient(135deg,rgba(16,24,32,.72),rgba(16,24,32,.42)) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 18px 40px rgba(16,24,32,.22) !important;
  backdrop-filter:blur(10px) saturate(120%) !important;
}

.job-banner-kicker{font-size:clamp(8px,.8vw,10px) !important;color:#90f2ff !important}
.job-banner-card h3{font-size:clamp(18px,1.45vw,24px) !important;color:#fff !important}
.job-banner-card p{font-size:clamp(11px,.85vw,13px) !important;color:rgba(255,255,255,.86) !important;-webkit-line-clamp:2 !important}
.job-banner-cta{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.70) !important;
  color:#fff !important;
  border-radius:8px !important;
}

.job-banner-controls{
  position:relative !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:5 !important;
}
.job-banner-dots{
  position:absolute !important;
  left:50% !important;
  bottom:-18px !important;
  transform:translateX(-50%) !important;
  gap:4px !important;
}
.job-banner-dot{
  width:5px !important;
  height:5px !important;
  min-width:5px !important;
  padding:0 !important;
  border-radius:999px !important;
  opacity:.28 !important;
  background:#64748b !important;
  border:0 !important;
  box-shadow:none !important;
}
.job-banner-dot.is-active{
  width:14px !important;
  opacity:.55 !important;
  background:#0a2f57 !important;
}
.job-banner-timer{display:none !important}

@media (max-width:1180px){
  .public-v14 > .job-banner-section:first-child,
  .job-banner-section,
  .job-banner-grid,
  .job-banner-slider,
  .job-banner-card.job-banner-wide,
  .job-banner-card{
    max-width:96vw !important;
  }
  .job-banner-card.job-banner-wide,
  .job-banner-card{
    min-height:calc(96vw / 3) !important;
    max-height:none !important;
  }
}

@media (max-width:900px){
  .public-v14 > .job-banner-section:first-child,
  .job-banner-section{
    margin-top:8px !important;
  }
  .job-banner-card.job-banner-wide,
  .job-banner-card{
    aspect-ratio:3 / 1 !important;
    min-height:calc(96vw / 3) !important;
    border-radius:10px !important;
  }
  .job-banner-card img,
  .job-banner-full-img{
    aspect-ratio:3 / 1 !important;
    object-fit:contain !important;
  }
  .job-banner-body{
    width:min(220px,36%) !important;
    padding:10px 12px !important;
    left:10px !important;
    bottom:10px !important;
    border-radius:12px !important;
  }
  .job-banner-card h3{font-size:14px !important}
  .job-banner-card p{display:none !important}
  .job-banner-kicker{font-size:7px !important}
  .job-banner-cta{font-size:11px !important;padding:5px 8px !important}
}

@media (max-width:560px){
  .job-banner-body{
    width:min(190px,42%) !important;
    padding:8px 10px !important;
  }
  .job-banner-card h3{font-size:12px !important}
  .job-banner-cta{font-size:10px !important}
}
