/* ===== Reset de corte/hifen para esta seção ===== */
.careers-benefits, .careers-benefits *{
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Se o herói usa overflow:hidden para "cortar" imagem, libera dentro da área dos cards */
.careers-benefits{ overflow: visible !important; }

/* ===== Grid responsiva sem largura fixa ===== */
.careers-benefits{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 1080px;
  margin: 24px auto 40px;
  padding: 0 16px;
}
@media (min-width: 768px){
  .careers-benefits{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

/* ===== Card sem width/height travados ===== */
.careers-card{
  width: 100%;
  max-width: 100%;
  min-height: unset;
  padding: 16px 14px;

  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;

  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 28px rgba(2,6,23,.12);

  overflow: visible; /* garante que nada "coma" o texto */
}

/* Ícone */
.careers-card .icon, .careers-card i, .careers-card img{
  width: 26px; height: 26px; margin-bottom: 10px; flex: 0 0 auto;
}

/* Título do card */
.careers-card-title{
  font: 700 15.5px/1.28 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #E6F6FF;
}

/* Ajustes extra para telas muito pequenas (≤360px) */
@media (max-width: 360px){
  .careers-benefits{ gap: 12px; padding: 0 12px; }
  .careers-card{ padding: 12px; }
  .careers-card-title{ font-size: 14.5px; line-height: 1.24; }
}

/* ===== Herói não corta conteúdo dos cards ===== */
/* Se existir .hero ou .header + .hero com overflow/altura fixa, relaxa aqui: */
.hero, .careers-hero{
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
.hero .container, .careers-hero .container{
  position: relative;
  z-index: 1;
  padding: clamp(36px, 7vw, 72px) 0 16px;
}